2017年9月14日 星期四

要如何做好一個直播?

直播團隊幕後大公開!產出高規格直播節目的必要元素


談起直播普及化,現在只要有手機,人人都可以是網紅、或是直播主播,但隨著直播越來越普遍,現在已經不能光靠一個人坐在鏡頭前化化妝、擠眉弄眼就能博取粉絲關注,必須從內容上下工夫。但各位真的天真地以為,只要把直播的內容規劃精彩,主持人和來賓對答如流,就可以換取線上同時數百數千雙眼球的關注嗎?其實設備、畫質以及所有幕後人員的配合也是呈現直播專業度重要的一環,到底一場直播節目背後需要多少人力的執行?需要使用動輒數百萬的高級設備嗎?一系列的直播幕後特輯,先從直播團隊的人力配置談起!

團隊各司其職,直播才能面面俱到!一、企劃-直播的「產婆」

每一次的直播,除了幕前會看到的主持人和來賓,幕後更靠著多位的重要工作人員共同完成,從前期的企劃、製作人,以及執行直播的導播、美術、攝影師、燈光師等等,每個人各司其職才能有專業規格的直播呈現。本篇先來介紹企劃及主持人的角色。
完整節目企劃是一場直播的核心,也是生出直播「骨和肉」的產婆!節目企劃在初期得做的就是討論出節目調性,要做一場知識性直播、活動直播、還是談話性節目、生活分享,才能定出整體節目的風格,該著重知識專業、輕鬆閒聊、或是從活動中提供教學…,否則調性不一的直播很容易造成觀眾和工作人員混亂。
接著進入「為主題定調」。該談論什麼話題,找哪些影片、圖片、背景資料當作佐證,或是運用道具等素材營造氣氛。一場直播節目不需要暢談天南地北,只要針對一個主題,由淺入深講清楚說明白。


舉例來說,DGcovery 的直播節目【文案不轉彎】就是專為創業家和行銷人設計的文案教學節目,許多創業家和電商有好的產品和服務,卻不曉得如何用文案抓出產品賣點、精髓,以及說出一個能打動消費者的故事,所以需要一位文案專家來為老闆和電商們指點迷津,節目企劃的呈現就會朝向「專業談話性節目」來設計,透過實際的產品廣告、商品文宣以及講師自行整理出的重點筆記,雙方更能透過直播直接問答互動,就像開一堂線上文案課!


 而家電品牌歌林在今年 2 月份的 新品暨經銷商感恩大會直播,則為現場活動直播。和直播節目的差別在於:活動直播是以現場互動為主,比較難以顧及線上觀眾,粉絲單純為收看節目的第三視角,雖然容易缺乏參與感,但如果整體活動規劃節奏緊湊、畫面吸睛,主題內容言之有物,甚至事前宣傳足夠,以及透過抽獎等好康優惠作為犒賞,仍可為一場乍看死板無趣的家電新品發表會,帶來不錯成效。像歌林經銷商大會直播也衝上 2 萬多次的影片觀看次數

二、主持人-直播中的「靈魂人物」

 主持人大概是除了企劃以外,最了解整場節目的人,有時候一個節目,主持人得同時兼任企劃/製作人,才能確實掌握住節目的重點脈絡。
他就像節目中的靈魂人物,開場必須要有清楚的引言帶觀眾進入話題重點;需要為來賓穿針引線,引導他們說出觀眾想聽到的故事及重點;過程中還得適時擔任場控,萬一來賓失控或是話太多,主持人必須找到合適時機點切入、拉回話題焦點;而萬一碰上話太少的來賓,則必須扮演良好的傾聽者,為他們重新整理或補充重點,避免節目效果不佳。
嚴格來說,主持人就像是節目中的「主人」而非「主角」,必須對整個節目流程暸若指掌,掌握住重點和節奏,卻又不能搶了來賓或講師的風采。既要和來賓聊得開心和樂有話題有內容,同時還得顧及線上互動的粉絲,不時關注他們、聊上兩句,以免讓粉絲缺乏參與感,所以身為主持人真的必須擁有一顆強健的心臟啊!
除此之外,有時候節目還會出現一些突發狀況!例如:來賓突然身體不適,現場有些噪音干擾、直播訊號不良、聲音忽大忽小或是直播出現秒差等狀況。
如果非設備問題,而是場控出了狀況,直播主持人也必須臨危不亂臨機應變在空擋時說些話、來點現場閒聊,切忌讓時間「停格」太久,否則觀看人次一定會迅速下滑。但若是設備問題,也請在第一時間和觀眾說明狀況,當觀眾理解自然能化解他們心中的疑慮,比較不會影響到節目收視或對節目的評價。千萬不要悶不吭聲或當作什麼事都沒發生,免得觀眾完全狀況外,反而會對團隊專業度的好印象打了折扣。
不管幕前還是幕後工作人員,都是讓節目順利播出的重要角色,下集我們還會為各位介紹其他的幕後工作。要做出一場好直播,就在每一個環節都全力以赴吧!


三、導播+控時-直播的「掌舵手」

導播其實就是整個節目流程的主導者。一場直播除了主持人的串場,同時也包含片頭、影片片段、圖片等輔助,來幫直播增加亮點,但圖片和影片在直播中安插的時間點,就必須由導播來主導除此之外,時間的控制也是導播一大重要功能,雖然直播並不像一般的節目必須考慮到廣告的安插,但是如果來賓和主持人聊開了結果大超時,也會拖慢整場直播的節奏,影響到節目的整體效果。


四、美術設計-直播的「加分效果」

一般而言,直播只能呈現現場的場景,但有了美術設計,確實可為直播的美感加分不少。巨匠美語粉絲團直播來說,加上LOGO設計以及美語教學的字卡和字幕,一方面除了讓網友學英文有字幕呈現更清楚易懂,另一方面也能提升直播的質感和專業度

五、燈光&收音&攝影-直播的「專業技師」

如果要考量節目整體的呈現質感,燈光和收音都是必須考慮進去的因素。以巨匠美語粉絲團的直播來說,是採用 2 盞分別有 600 顆LED燈泡的攝影棚燈,本身可以調整亮度,也可以再加上柔光紙,讓打在來賓臉上的光線變得柔和;但光靠左右兩側的燈光還不夠,在光線來源不夠充足的情況下,也得在攝影機或手機前方增加一盞無影燈,補足正面光源,也讓鏡頭前的主持人、來賓身上的光線更佳充足,避免陰影的產生。
收音的部分,則要考慮現場環境的雜音以及收音的距離。如果沒有專業直播間或攝影棚,那麼就挑選室內較安靜的地方吧!如果不得已出外景、要做戶外直播的話,就得注意挑選的地點,應該避免風聲以及車聲倘若還是無法避免環境的雜音,那麼強烈建議讓來賓或主持人別上無線mini麥克風,或是現場預備指向性麥克風來加強收音效果。
至於直播呈現的畫質,目前【巨匠美語粉絲團】以及【重機天地】的直播都是採用電視台攝影機,1920 x 1080的HD高畫質更具專業,但如果不是常常直播或特別追求高規格畫質,其實使用一般的手機也沒問題。

 六、直播環境/背景

直播其實不一定得在專業直播間或攝影棚,即使在家或是辦公室也一樣能辦到,但背景環境的設計和配置就得留意,如何搭配直播主題和依照直播性質營造整體性。【重機天地】直播來說,光看節目畫面很難想像是在一間辦公室騰出的空間,但只要辦公室經過整理,再為直播主題設計背板,其實可以帶給觀眾專業感相對地,如果想營造家的感覺,那麼可以在直播區放些沙發、抱枕,再打上暖色調光線;另外,也可以挑選在有走廊的空間直播,製造景深效果。
想要做出高規格質感的直播,其實不一定得採用動輒上百萬的專業器材,在有限的資源和成本下,只要從「觀眾角度」設計,在小細節上發揮一些巧思,營造出想要帶給觀眾的感覺,再加上團隊配合,每支直播都可以是讓觀眾印象深刻的專業直播!
(文章出處: 1.https://blog.dcplus.com.tw/marketing-knowledge/starter/115669
2.http://www.dgcovery.com/2017/05/09/broadcast2/)

2017年9月13日 星期三

☻☻QR-Code變成向量檔☻☻


關於QR條碼,簡單的說這是一個非常棒的行銷工具,一個小小的方塊,就能包含很多的文字訊息,透過智慧手機,隨便任何角度都可以將資訊掃描下來

但是網路的 QR-Code 下載回來後,要放大在印刷品或是海報上時,就會變得很模糊不清,讓掃描軟體無法辨識,這裡我要教大家解決這個問題的辦法



這裡需要的是 Adobe Illustrator 軟體,只要是設計人都會聽過過的軟體,它的主要功能是插畫的繪製,而這裡我們將利用到它內建的一個功能,叫做自動描圖的功能



打開軟體之後,將網路下載的 QR-Code 丟到裡面,有些 QR-Code 沒有辦法下載,只能用螢幕截圖的方式抓下來





選取圖片之後,在工具列上面,選取 物件 → 即時描圖  → 描圖選項



將上面的兩個數值,調整成 0 之後,再按 描圖,這樣就可以獲得一個向量格是的 QR條碼
最後跟大家介紹一下 Illustrator自動描圖選項的幾個項目

路徑調整

控制描圖外形與原始像素之間的距離,較低的數值會產生較緊密的路徑吻合度,相對的數值高的時候會產生比較鬆散的吻合度,因為我們要求準確度,所以我們這邊設定為 0

轉角角度
原始影像中轉角的銳利度,即描圖結果的路徑是否有尖角的產生,因為 QR-Code 都是很多銳利的角組成,所以我們這邊設定為 0

 忽略白色
預設的選像是打勾的,描圖後就會多描繪一個白色的底,但是結點增多檔案會變大,所以建議勾選忽略白色,自己畫一個白底襯在下面 

另外提一下 最小區域
被描圖的最小特徵區域以像素為單位,如果最小單位的邊長都是 2 ,則最小區域該設為 2 x 2 = 4 像素


以上就是全部的 QR 條碼向量化的教學,之後可以輕鬆的將條碼放置在任何的海報或DM上面了 :]
♫♪♫♪另外補充一下,如果使用的是新版的 Adobe Illustrator CS6 就不需要以上那麼多的設定,直接使用自動描圖,就可以達到非常精準的描圖。♫♪♫♪♫♪
























工程師與設計師的橋梁 - zeplin

zeplin 介紹

今天給大家介紹一款軟體—Zeplin,它是集標註、切圖、雲存儲、Guideline和生成前端代碼於一體的協作軟體。作者在團隊中已經使用了一段時間,親測好用,軟體的主要功能是標註,引入團隊後設計師再也不用標註,前端工程師看標註的效率也提高,一舉兩得。
Zeplin: zeplin.io

Zeplin出現之前,在早期PS時代都是用馬克曼給介面標註,sketch出現之後,有類似measure這樣的插件可以實現自動標註,但使用上還是很繁瑣,得到的產出物也並不方便工程師使用。
我們標註的稿子大部分都是如上圖所示,標註和效果圖合在一起,標註會遮擋內容,並不利於瀏覽。一般要出兩套圖,一套標註,一套效果圖。
在使用馬克曼標註時,很多設計師無法確定哪些信息需要標註,大多的處理方法是把所有間距元素都標註上,但其實有些信息是不必要的,這樣反而不利於工程師瀏覽。
其次,當項目的頁面很多時,標註會占用一部分時間,開發做好介面,進行視覺驗收的時候,還要截圖再標明視覺錯位的地方,如果是安卓有多個尺寸,還要出多個標註稿。對於疊代比較快的團隊來說,標註是一件耗時耗力的事情。
Zeplin的出現就是為了解決以上溝通錯位的問題,設計師不用再為標註勞心,工程師看設計稿的效率也提高了,一舉兩得。
Zeplin支持sketch和PS文件導入,安裝好後會自動把插件裝上,插件的作用是把設計稿導入到Zeplin。
首次登錄,會提示你創建一個項目,免費版的用戶可以創建一個項目,企業用戶100美元/月可以無限創建。
創建完成後,可以邀請團隊成員進來,把團隊成員設置為管理員,每一個成員都可以邀請其他成員進來。


-----

實際使用展示

記得開檔案時要選擇新增"工作區域" 如下圖

工作區域有很多種預設規格可供選擇 (當然也可以自訂)



可以匯出的狀態 畫面是這樣~
可以按黃色按鈕匯出










文章節錄自:再見!設計稿標註! https://read01.com/zh-tw/zg2PBD.html#.WboV9bIjGUl

影片製作教學 剪輯教學 跳剪

跟大家分享一個跳剪教學,學會運用跳剪,對影片後製是草雞有用的,
他可以讓你的影片更清楚呈現想要的內容而且吸引觀眾注意力,
除了跳剪之外,他的頻道還有很多簡單有趣的教學,喜歡的話可以多看看歐!


《CITTÁ BELLA 儂儂》嶄新蛻變的新LOGO

今年的9月號正逢《Cittá Bella Taiwan 儂儂》自1984年創刊以來的第400本發行,我們做了個決定,那就是-「換logo」!特邀請台灣相當知名的動態影像設計領域(Motion Graphics)先驅之一,並由羅申駿先生於2006年創辦的「JL Design」設計團隊,為此本陪伴了讀者們30幾年的舊有雜誌標誌給徹底翻新!也希望全新的《Cittá Bella Taiwan 儂儂》依舊是你們隨手翻閱的刊物。



「JL Design」,動態影像領域的首席設計團隊
這一次全新《Cittá Bella Taiwan儂儂》logo設計,由羅申駿 (Johnason Lo)先生帶領的「JL Design」操刀!2006年成立司,「JL Design」是台灣動態影像設計領域(Motion Graphics)的先驅之一,在台北成立十年迄今,上海成軍亦一年有餘,客戶遍及全球各地,包含:HBO、Disney、CCTV、浙江衛視、AXN、Netflix等,具有豐富的跨界整合與策展經驗,如:第25屆與26屆金曲獎視覺統籌、2014年及2015年金點設計獎頒獎典禮統籌;另外,也包括各式各樣等相關商業品牌與創意策略規劃,作品包含:肌膚之鑰、Levi's、Mercedes-Benz等。而他最近更為現任數字王國(Digital Domain)大中華區執行副總裁暨視覺特效總經理,於動態影像及設計領域深具影響力!






與羅申駿面對面,深談雜誌新logo的改變及意義
在《Cittá Bella Taiwan儂儂》正逢400期、亟欲尋求突破的同時,我們找上了羅申駿先生合作、重新設計雜誌logo,希望能藉由「JL Design」前瞻性的設計眼光,為這本這本創立達30年以上的台灣本土老牌時尚雜誌,帶來前所未有的「脫胎換骨」!
BBella 
J羅申駿(Johnason Lo)

B:這是你們第一次幫刊物操作logo的設計?
J雖然過去我們也曾與《天下》雜誌合作封面設計,但,沒錯!這是我們首次幫時尚雜誌操作logo設計。很榮幸能為《Cittá Bella 儂儂》改版,作為台灣歷史最悠久,且唯一輸出至其它國家的本土女性雜誌,對我們來說意義非凡!

B
與一般你們接的商業案件,設計刊物的logo有何不同?
J以品牌改版來說,無論任何商業案件或刊物,都需要完整了解該品牌的既有形象與定位!唯有全面性地分析市場定位、深入理解該領域的設計特質,才能夠審慎思考調整的方向,進而打破它舊有形象,嘗試創新設計;因此,以前置作業的市場研究這件事來說,這與製作其它案件沒有太大的差異。

B要改變Cittá Bella 儂儂》的logo,最大的困難之處是什麼?
J目前在台灣雜誌市場的各大品牌定位中較模糊,因此需要詳細、精準地掌握定位,確立品牌本身獨特方向,讓《儂儂》與其它刊物定位拉出差異性。  

B
創作過程中,你們有算過大概做了幾種logo
J哈!若不含過程中被打槍的設計.....將近10款吧。但是每一款logo設計幾乎都重複修改或調整了15次左右。  

B
新的Cittá Bella 儂儂》logo,你認為需要具備什麼條件?J吸睛是最主要重點!國際化則為了讓《儂儂》這本台灣時尚雜誌前進更多不同的市場與目標!雜誌的改版、創新具有歷史性,而新的logo正是具有流行的品味、態度、以及不過於譁眾取寵。  

B
請簡單說明一下這個logo的幾個重點細節?J本次logo主要概念是,想呈現擁有33年歷史之久的《儂儂》雜誌即將「突破」與「創新」!由經典帶有未來感、俐落感Futura字體做修改,將原本富有稜角的英文字體加入圓潤化修飾,同時加入刻意的切角及留白設計,讓字母「B」在整體logo中能夠更加強化,俐落中帶有流行與創新;而若在不同平台運用,亦可將「B」以單一字母應用和展示。

B:最後,請描繪你心中的新Cittá Bella 儂儂》女孩,她有什麼特質?
J「Bella is______. Dare to be yourself. Dare to believe.」 :
《Bella》是妳最信任的夥伴!看見都會女性擁有的各種樣貌:成熟、自信、追求夢想、信仰等女性,具有豐富的內在涵養與勇敢的自信光彩;《Bella》懂妳的品味格調,無需汲營他人眼光;《Bella》勵妳成為「妳自己」!擁有最真實的自信,而妳就是美好的事物的解答。




為什麼介面設計中,使用者的個人頭像大多是圓形的?

越來越多的平台或 App 喜歡使用「圓形」作為使用者的「個人頭像」形狀。
是近期的設計風潮?還是大部分介面設計師的愛好?或有其他特別的原因呢?

「個人頭像」的定義與發展

隨著網路用戶族群快速增加,他們對於藉由平台與其他用戶互動的需求就越高,
也因此發展出許多可互動的平台類型,例如論壇、信箱、聊天室、部落格到社群等。
其中每個用戶都代表著一個獨特個體(無論是真實身份或虛擬角色),
這些個體會有相對應的資訊,以及代表個體的個人頭像。
而個人頭像通常是具個性化(用戶覺得能代表自我)的標誌,
大多以平面或 3D 圖像的方式呈現。

UI 上的個人頭像英文為 Profile Picture 或 Avatar ,
其中 Profile Picture 在字義上較容易理解,反倒是 Avatar,各位讀者可能會充滿問號,
因為大家對 Avatar 的印象應該都是阿凡達電影。
根據 techpedia 平台上的描述,Avatar 一詞出現於 1985 年,
由盧卡斯電影公司(Lucas Film)內發展線上角色扮演遊戲(Habitat)專案人員(Chip Morningstar & Joseph Romero)首先提出。
此詞源自於印度教對「聖人降臨(a descent of the Supreme Being)」的描述,
在英文裡有「化身 (incarnation)」或「代表(manifestation)」之義。


感受與認知

方形太無趣了。
大腦可較輕易的處理圓形內的訊息,減少認知的壓力。
相較於方形,圓形更柔性、有機、安全、順眼、現代與友善,也更能與他人情感交流。
更有關注的感覺,例如想到望遠鏡或放大鏡的視野。
大多照片的四周都是無意義的背景或訊息,圓形可以將其切除。
通常拍照會把「人」擺在中心,而圓形中心到四周距離都一致,可讓臉更突出。

視覺

視線在方形的焦點有 5 個(四個角 + 中心),而圓形只有一個(中心)。
圓潤的線條或角度,可讓視線自然的追隨與運動,不會像看到 90度角 而停頓下來。
在掃視的情況下,使用圓形可協助使用者辨識或區分是否為內容,
因為內容通常會置於用方型容器,例如文字、照片或專輯等。

其他

行動裝置普及後,因圓形與手指按壓在螢幕上的形狀類似,而被廣泛的使用。
其實人類早就有這樣的應用,例如將人物應用於圓形硬幣與圓形藝術畫中。
只是一個設計的風潮,剛好流行到”圓形”這個週期。
很多準則或模板都只提供圓形版本。
現在的 CSS3 技術讓圓角(圓形)輕易實現且各瀏覽器也幾乎都有支援。


作者 Anthony 於 UX movement 上提出了相關觀點

角度的邊緣,看起來較明顯

通常方形的銳利四角,因為對比(顏色或形狀)的關係,
在視覺上會更明顯,造成干擾。使用圓形並無此問題,所以更可強調重點 –「臉部」。


方形對角線較長

方形的對角線比邊緣還長,用戶目光易延伸出去;
圓形半徑長皆一致,用戶可花更少時間在理解內容,眼球也較不需要移動。


圓型用於非人物圖片,效果也是一樣的嗎?

雖然使用圓形的個人頭像可排除不相關的背景,更聚焦於人臉上,
但非人物的圖片(風景或食物等)也有同樣效果嗎?
Anthony 認為不一定,因為可能因此失去了該圖片要傳達的資訊,如景深或細節等。


上面已整理了許多專家的觀點,大部分是相當的認同的。
不過,也有一些觀點是以上未提到的,補充給大家做參考,如下:

較強的設計感

圓形的個人頭像,能讓介面傳遞較強的設計感。
不過這點會受設計師應用的手法,或使用者的主觀感受影響。
此外,平台無法限制使用者上傳圖片的品質,若上傳圖片的品質、構圖或美感較差,
將其套用在圓形的遮罩裡,介面的設計感會比方形的好。

高度親和力

就如同人與人的交際,在初次見面時,
會認為帶有嚴肅表情的人較難相處,而微笑滿面的人可馬上聊起來。
為什麼會有這種先入為主的觀念呢?這就是「親和力」高低層度的差異所致。
而曲線與圓在人們的印象中,就是親和力的象徵。
若介面上使用圓形的元素(個人頭像等),使用者可能會產生,
此產品學習曲線較低的印象。

雖然矩形可讓空間利用最佳化,但應用圓形又可多一點留白空間

若不考慮使用者體驗與美學,將不同的內容以方形排列,將最具有效能,
但這樣的產品絕對不會受到用戶歡迎的。
因此,設計師都應了解留白帶來的效益,
例如降低視覺負擔、增加閱讀性、區隔不同內容與更具美感等。
適當的留白對產品來說相當重要,同時也考驗設計師的基礎訓練是否扎實。
就個人圖像而言,同樣尺寸下,圓形又能比方形多一些留白空間(在四角處),
除了增加與其他內容的區隔性外,也能讓介面帶點趣味性。


使用圓形個人頭像的小撇步

css 怎麼做?該注意什麼?

只需要針對個人頭像的 HTML tag or class 寫一行 border-radius: 100%; 的 css 屬性就可以達到!


給予使用者上傳圖片的建議

不知道大家有沒有這樣的經驗,就是當你挑好圖片並上傳後,
發現圓形的形狀外框遮住了許多重點(例如臉的一角),效果不如預期。
其實,設計師可以在上傳圖片的介面上,提供給使用者一些建議。
例如,畫出一個人臉可在圓形裡完整呈現的區域,這樣使用者就會比對自己的圖片,
並挑選較符合者;或是提醒圖片上有字的話,建議的大小為何(可看的清楚);
提示不能使用非法圖片等。

提供多種預設圖片,及更完善的圖片編輯器

有些使用者手上剛好沒有適合的圖片,或認為不重要,可能就不會設定個人頭像了。
不過,平台若是希望呈現出多種角色互動的氛圍(如社群網站),
或有協作辨識的需求(如 trello)。
設計師可在設定流程的頁面上,
提供多種預設個人頭像供使用者快速選擇(如多款顏色或企業識別的變形應用),
或設計某種自動機制(如帳號的第一個字母)。
另外,利用第三方社群登入方式,也能自動載入在該平台上傳的頭像,
是個對使用者較便捷的方式。

再者,若能提供完善的圖片編輯器,
也能吸引使用者做出更符合自我形象與品質更好的頭像,
例如挑選濾鏡、色相與明度調整等。
不過,圖片編輯器的有無,應該要取決於平台服務的本質。

同尺寸下,圓形看起來比方形小

某一圓形的直徑與正方形的邊長一致,
若將兩者放在一起,視覺上會認為圓形的較小(如下圖左)。
如果排版有將兩者放在一起的需要,可將圓形放大一點,以達到視覺的平衡(如下圖右)。


使用 gif

有越來越多的平台允許使用者放上 Gif 檔作為個人頭像,
以呈現動態效果,這讓使用者更可彰顯其特色或品味。

免費桌面錄影



裡面還有其他免費軟體支援

影片轉檔、影片下載