上周末卡農(nóng)老師@卡農(nóng)_Channel 舉辦了2周年直播活動，其中的UI是我設(shè)計的。感受到這次設(shè)計過程中有一些經(jīng)驗值得分享，這里做一個簡單的復(fù)盤。

PART1 創(chuàng)意過程及參考

1.1 概念確立

這套直播間UI其實本來是我為自己設(shè)計的。而它又來自于我工作上的一個廢棄概念。那項工作的需求為：為一個商業(yè)足球場構(gòu)思一組互動打卡裝置的創(chuàng)意，目標(biāo)受眾是球賽觀眾。

我覺得到線下來看球賽的球迷們內(nèi)心都是無比堅信，自己支持的球隊能夠獲勝的。此時此刻的心情就像是某種情緒賭注，指向的期待自然是支持的球隊能夠獲勝，自己可以驕傲地向朋友們宣布自己支持的沒錯、自己親臨現(xiàn)場助威了，最好還能有照片或者視頻材料拍到看臺上的自己。于是我構(gòu)思了一個名為《明日頭條》的創(chuàng)意概念。那時找的參考大概是這樣的：

除了報紙這種載體以外，也考慮了電視、視頻網(wǎng)站界面之類的載體，引用相同的概念，只是在平面呈現(xiàn)上有所差異。

挪作直播間UI設(shè)計時，電視和視頻網(wǎng)站與直播平臺的形式太接近了，不夠有趣味性。自然是報紙產(chǎn)生的反差更明顯。而報紙上照片內(nèi)的畫面會動這一點更是能勾起一些哈利波特中魔法報紙的些許聯(lián)想。至此我確定了這一創(chuàng)意的大致概念。

1.2 平面構(gòu)思

而開展設(shè)計執(zhí)行之前，我也不得不搜索大量平面中對于報紙概念表現(xiàn)方法的參考：

這一階段可以初步遇見一些問題了：

其一是報紙頭部的排版形式。這種形式感非常重要。由于整個畫面下方的內(nèi)容會用來放直播內(nèi)容和彈幕列表，因此只有上端這部分有機會去塑造“報紙”的概念。但是通常報紙封面的標(biāo)題都會占據(jù)一定的高度，如果照搬這樣的形式就會導(dǎo)致下面畫面區(qū)域被壓縮。不過這點不難解決，能找到一個頭部的形式感特別明顯，并且占用高度不高的形式即可。

再者，是直播間UI是橫屏，而報紙一般是豎向的版式。橫屏對于報紙概念的呈現(xiàn)會打很大折扣。

在我為我自己設(shè)計的UI中，我最終選擇強化報紙邊緣的扭曲，以及光影關(guān)系來塑造報紙的立體感，使其看上去不像單純的平面排版。此外我還添加了一雙插畫風(fēng)格的手的方式來強化報紙的概念。

直到目前我在使用的仍然是這款UI。它在功能上是比較完善的，標(biāo)題、簡單的直播間信息、時間控件、彈幕區(qū)域、直播畫面區(qū)域都有了。但我內(nèi)心仍然感到不完美。主要原因在于這雙手得到加入，如果在背后的畫面已經(jīng)足夠豐滿的情況下，加入一個畫風(fēng)不同的元素，我覺得這當(dāng)然是錦上添花之筆，像電影結(jié)束后的小彩蛋一樣，去豐富整個設(shè)計的趣味性。但是這里的手是出于報紙的概念不夠明顯才加入的，是對于缺陷的補償。這恐怕會讓觀眾覺得手的引入是相對生硬、缺乏出處的。

于是在為卡農(nóng)老師設(shè)計直播間的時候，我找了這樣的參考：

報紙下端卷曲，縱向的版式自然地被折疊為了橫向畫面的比例。這種處理我覺得比較滿意，能更加明晰報紙的概念，而且符合生活中報紙的呈現(xiàn)方式，不會太生硬。于是將其納入設(shè)計。

PART2 設(shè)計執(zhí)行流程拆解

2.1 排版

報紙紙面上得到排版是整個設(shè)計中最重要的部分，也是最先執(zhí)行的部分。不過操作起來并不難，只是需要反復(fù)評估：①. 報紙的感覺是否明顯；②. 版塊的分布是否合適。

上一階段的排版，根據(jù)我的個人習(xí)慣是完全在Illustrator中完成的。除了版塊劃分以外，還做了字體的挑選和設(shè)計，以及依賴Ai中的筆刷，讓線條具有一些印刷的失真效果，使得整體氣質(zhì)更復(fù)古。接下來進(jìn)入光影合成的部分就需要進(jìn)入Photoshop操作了。

置入PS后，通過添加“浮雕”的圖層樣式，以及材質(zhì)紋理的堆疊，讓它初步具有了一個紙張的立體感。不過這個來自Ai智能對象不能直接做變形，需要再次嵌套一層智能對象。

而后就要進(jìn)入整個設(shè)計技術(shù)要求最高的環(huán)節(jié)——通過扭曲和光影關(guān)系來塑造立體感。

2.2 變形

首先是扭曲，這里有一個設(shè)計難點，那就是預(yù)留給直播畫面的區(qū)域不能被扭曲。實現(xiàn)方式如下：

對對象執(zhí)行【cmd+T或Ctrl+T，自由變換】，然后右鍵—變形。通過這個功能可以賦予對象以扭曲。點選后，界面中提供的變形網(wǎng)格是這樣的：

是一個基礎(chǔ)九宮格。外圍四角是錨點，而錨點附帶的手柄各自到邊緣1/3的位置。對于錨點的調(diào)整理論上會輻射到整個九宮格，只是距離越遠(yuǎn)越薄弱：

所以我們要拆分這個網(wǎng)格，拆分出多組九宮格，使得受影響的區(qū)域不能涉及到直播畫面的區(qū)域。請注意界面上方有一個名為“拆分”的功能。對預(yù)留給直播畫面的區(qū)域，在其上下各打一條橫向拆分；左右各打一次縱向拆分。

拆分之后的網(wǎng)格是這樣的：

仔細(xì)觀察一下的話，如下圖所示，這四個黃色的部分將自成一塊九宮格。對于四角錨點的調(diào)整能夠影響到的范圍將局限在這四個九宮格以內(nèi)了。包括直播畫面區(qū)的其余區(qū)域?qū)⒉皇苡绊憽?/p>

這部分是本次分享的重中之重，它揭示了為非平整平面融入平整畫面的方法。接下來的其它部分就相對簡單了。

2.3?光影與下層結(jié)構(gòu)

塑造光影關(guān)系：光影關(guān)系以單獨的黑白圖層以剪貼蒙版的方式加在對象圖層的上方。設(shè)計師的著色方法通常有畫筆和漸變工具這兩種。常用的混合模式有：【變暗組】：變暗、正片疊底；【變亮組】：變亮、濾色；【復(fù)合組】：疊加、柔光。有了光影關(guān)系能讓平面的紙張更加具有立體感。

然后復(fù)制這一層對象，選擇性的復(fù)制光影，來搭建報紙多頁的結(jié)構(gòu)。

理論上有報紙上半部分就已經(jīng)足夠了。但是為了利于報紙概念更加清晰，可以藝術(shù)化處理，刻意加入卷曲后的下半部分在后面露出：

至此，報紙形態(tài)已經(jīng)足夠豐滿了。

2.4?場景化

接下來就是背景和報上方元素的加入。

這里同樣有一些設(shè)計意識指向的藝術(shù)化處理。相片框中的相片自然是局限在框內(nèi)的，但是為了讓角色的層次更突出，可以讓她的頭部稍微超出上邊界；以及整個報紙表面是相對平整的，可以加入一張小貼紙來更加豐富層次。

最后，基于角色屬性做一個全局調(diào)色，我選擇讓紙張的顏色更加偏紫色了。以及打上一個漂亮的光：

可惜調(diào)色和光最后都被去掉了嗚嗚嗚嗚。

全文完