在之前的文章中我有過對西十區(qū)APP的信息架構(gòu)做過詳盡的分析。我覺得在人們對文化需求日益增加的情況下矫废，西十區(qū)作為一種在該領(lǐng)域獨特的商業(yè)模式其優(yōu)點在現(xiàn)有的APP中完全沒有得到很好地體現(xiàn)浩螺，用戶并不能充分享受該產(chǎn)品帶來的福利铃诬。在APP的使用過程中用戶體驗程度還不能像德芙巧克力的經(jīng)典臺詞--絲絲順滑。要做到絲絲順滑用戶在使用的過程中應(yīng)該是感受不到APP的存在的，這也許就是我們常說的沉浸式體驗吧兴革。作為與用戶直接接觸的最頂層設(shè)計，如果不能將各種底層的設(shè)計思路體現(xiàn)在UI設(shè)計當(dāng)中蜜唾，那底層的設(shè)計都是無用徒勞的杂曲。所以我才在產(chǎn)品架構(gòu)建立好之后嘗試是否可以將西十區(qū)的UI設(shè)計得更加合理。
根據(jù)查閱的書籍與文章袁余，主要會從格式塔原則為中心擎勘，并從視覺重量、視覺方向颖榜、色彩的使用等方面對APP主頁進(jìn)行分析棚饵，并給出自己的重設(shè)計方案。
（測試機(jī)型：iphone6手機(jī)固件版本：ios9.2.1? ? ? ? ? 西十區(qū)軟件版本：1.2.0）
首先我們先看下現(xiàn)在西十區(qū)APP的主頁及將其模糊10像素后所呈現(xiàn)的狀態(tài)
從 圖2 中我們可以清晰得分辨主頁上每個元素的視覺重量掩完，我們可以看到最上面的一大塊橘黃色（以下稱框1）與中間的廣告欄（以下稱框2）占據(jù)了該頁面最重的分量：從大小上來說兩者大概占據(jù)了1/2的頁面
從顏色來看噪漾，框1顏色為明顯的暖色，更容易被眼睛捕捉到且蓬，視覺比例較重欣硼。框2中顏色的飽和度及色值較高（深紫色及黑色）再加上顏色相對較為雜亂導(dǎo)致空間密度較高恶阴。種種因素都推高了框1和框2的視覺重量
從整體上看诈胜，整個頁面的視覺重量都集中在上2/3，即使是在這2/3中冯事，絕大部分是集中在兩個廣告欄上焦匈。因為這并不是一個展示類的APP，展示廣告并不是產(chǎn)品的目標(biāo)也不滿足用戶的需求昵仅，這樣就導(dǎo)致了主頁的視覺表現(xiàn)有失偏頗括授。這樣來看，該產(chǎn)品在整體上已經(jīng)偏離了大方向岩饼，即使細(xì)節(jié)做得再完美也是無用的荚虚。
下面我們將結(jié)合格式塔原則來細(xì)細(xì)分析一下該產(chǎn)品的細(xì)節(jié)有什么缺陷：
導(dǎo)航欄：
缺陷一：導(dǎo)航欄顏色使用考慮欠周全
瀏覽完整個APP之后會發(fā)現(xiàn)橙色為產(chǎn)品的主色調(diào)（APP的桌面顯示圖標(biāo)也是橙色的），所以將導(dǎo)航欄設(shè)置成橙色可以體現(xiàn)顏色中的積極向上的一面籍茧，為產(chǎn)品定下了主基調(diào)版述。但是考慮到將導(dǎo)航欄設(shè)置成大塊的橙色后其視覺層級相對較高，視覺層級提高之后其承載的信息及功能也應(yīng)該相對較高寞冯，例如“淘寶”（ 圖4 ）渴析，在淘寶的使用過程中晚伙，搜索欄是我們最主要的最重要的功能入口，所以其導(dǎo)航欄為大紅色俭茧。但是考慮到本產(chǎn)品的定位及功能咆疗，用戶使用該產(chǎn)品時并沒有像打開淘寶一樣有明確的目的，大部分用戶僅僅是瀏覽并挑選母债，而搜索指向的是明確的目的與產(chǎn)品的目標(biāo)相悖午磁。為了使用橙色體現(xiàn)產(chǎn)品的主基調(diào)的同時能夠削弱導(dǎo)航欄的層級可以將導(dǎo)航欄上的字體設(shè)置成橙色而整個導(dǎo)航欄設(shè)置成較淺的顏色。
缺陷二：文字“上赫泵牵”與向下箭頭的距離較遠(yuǎn)
“上貉富剩”與向下箭頭的距離與箭頭至搜索欄之間的距離相差無幾。但常識告訴我們向下箭頭其實代表了“上貉萌郏”是可以向下展開的意思登颓，所以箭頭與上海是一組的。在這一點與格式塔原則中的將相關(guān)聯(lián)的元素相互接近是一致的红氯。
缺陷三：搜索欄可用性較差
在顏色上搜索欄與背景（導(dǎo)航欄）之間對比不夠明確框咙，用戶對于所有的搜索欄的心理模型應(yīng)該是搜索欄是一塊缺口，我們需要輸入一些文字將其填補(bǔ)起來痢甘。所以現(xiàn)在絕大多數(shù)APP的搜索欄有兩種選擇喇嘱，一是將搜索欄挖空，直接留白（ 圖5 ）产阱；二是將搜索欄的顏色在導(dǎo)航欄的顏色的基礎(chǔ)上加深婉称。（ 圖4 ）這兩種都符合我剛才所說的用戶心理模型。但是現(xiàn)產(chǎn)品搜索欄的顏色是在導(dǎo)航欄顏色的基礎(chǔ)上減淡构蹬，由于較前的顏色視覺層級較高王暗，使用戶感覺該搜索欄凌駕于導(dǎo)航欄之上，就像在導(dǎo)航欄上貼了一塊東西庄敛，這種用法一般是在用戶不可輸入的提示性文本框中使用俗壹。所以在此這樣使用并不合適。
其次導(dǎo)航欄中的搜索圖標(biāo)“放大鏡”其大小及位置也有問題藻烤，大小上明顯與搜索欄中的字體大小不相匹配绷雏，在位置上首先“放大鏡”與文字相距太遠(yuǎn)，不符合格式塔原則中的相關(guān)事物距離應(yīng)相接近的原則怖亭。其次幾乎所有的APP都將“放大鏡”放置于文字前方涎显，可能是因為：一、放大鏡作為一個已被用戶熟知的代表搜索的圖標(biāo)作為APP的習(xí)慣性用法兴猩，降低了用戶的學(xué)習(xí)時間期吓，用戶一眼就知道其內(nèi)在含義（即使不看后面的文字）。二倾芝、大部分用戶的視覺瀏覽方式都是從左往右瀏覽讨勤，將“放大鏡”放置于前方能夠減少用戶在使用該功能時的思考時間箭跳，用戶可以不用讀完“搜索演出/明星/活動”就開始進(jìn)行搜索，符合“Don't make me think”潭千。
缺陷四：導(dǎo)航欄與廣告欄之間無間隔
在現(xiàn)產(chǎn)品中導(dǎo)航欄與廣告欄直接是無縫連接谱姓，在圖6中廣告欄與導(dǎo)航欄顏色相似，根據(jù)格式塔原則中的延續(xù)性原則刨晴，用戶可能會將兩者歸為一組（在模糊狀態(tài)下根本無法分辨屉来，圖2），不能確定各自欄目的功能割捅，導(dǎo)致了用戶對導(dǎo)航欄產(chǎn)生不同的理解從而違反了格式塔原則中的組織性原則奶躯。
功能Button：
缺陷一：4個Button 樣式及icon不一致
在上一篇APP架構(gòu)分析中帚桩，我對產(chǎn)品定位及用戶需求做了詳細(xì)的分析亿驾。在主頁中這4個Button從產(chǎn)品功能上占據(jù)了大半江山，所以是用戶進(jìn)入APP的主要入口账嚎。由于在主頁最重要的位置其空間有限莫瞬，所以需要合理分配各個功能所代表的button的次序、大小郭蕉、顏色疼邀、空間。
在架構(gòu)重設(shè)計文章中我將4個button的內(nèi)容改為了折扣票召锈、今明演出旁振、稀缺票、演出日歷涨岁。由于button個數(shù)相對較少拐袜，在次序上將折扣票、今明演出梢薪、稀缺票放置于前三即可蹬铺。為了保持四者內(nèi)在一致性，button的大小及樣式不宜改變（在現(xiàn)APP中今明演出button的樣式與其他三者不一致秉撇，違反了格式塔原則中的相似原則）甜攀，四者唯一可以有所不同的就是icon及顏色的差別了，但為了體現(xiàn)button之間的內(nèi)在聯(lián)系琐馆，可以在顏色上控制飽和度及亮度一致僅在色相上做相應(yīng)變化规阀，對于每個功能圖標(biāo)顏色上的使用應(yīng)當(dāng)謹(jǐn)慎，以體現(xiàn)其間功能的重要程度瘦麸。而其icon在大小樣式方面應(yīng)保持一致性谁撼，像現(xiàn)APP中既有文字又有抽象圖標(biāo)是不行的。
中間廣告欄：
缺陷一：三個廣告極其雜亂瞎暑，完全不能看
我認(rèn)為這是整個主頁設(shè)計最差的地方彤敛，完全就是把一堆垃圾堆在一起与帆。
從空間上來說三個廣告之間的留白幾乎是沒有，但三個廣告之間是毫無聯(lián)系的墨榄，吸引了用戶大量的注意玄糟，但用戶需動腦去分清其中的關(guān)系浪費用戶時間，違背了格式塔原則的組織性原則袄秩。而且整個主頁都是對稱設(shè)計阵翎，就在此空間上是非對稱設(shè)計。
從顏色上來說三個廣告都使用了紅色之剧，而且其他顏色色值較高郭卫，導(dǎo)致了整個一條廣告欄都是重點，產(chǎn)生的結(jié)果就是三個廣告都會被用戶所拋棄背稼，甚至有些用戶會直接離開本產(chǎn)品贰军。
從視覺方向來說，三個廣告方向完全不一致蟹肘，左側(cè)為橫向词疼，右上為斜向，右下為縱向帘腹。無一例外的體現(xiàn)了視覺的雜亂贰盗。
解決方案：方案一、其實將三個廣告單一展示都是非常不錯的阳欲，將廣告進(jìn)行單一滾動顯示能夠解決這個問題舵盈。方案二、將三個廣告進(jìn)行統(tǒng)一化設(shè)計球化，對其顏色秽晚、字體、大小赊窥、背景及所處位置進(jìn)行重新設(shè)計同時顯示三條廣告爆惧，增強(qiáng)廣告之間的相似性，減輕視覺負(fù)擔(dān)锨能。對以上兩種方案我更傾向于方案二扯再，方案一中廣告滾動顯示可能會降低廣告的曝光度，但方案二所需成本更大址遇。
熱門推薦欄：
從圖2 中我們幾乎看不到熱門推薦欄的內(nèi)容熄阻，即使是在正常情況下，由于中間廣告欄的視覺重量太過沉重倔约，我們很少會注意到熱門推薦的項目秃殉。由于該產(chǎn)品針對的是一些無明確目的的用戶，所以用戶需要產(chǎn)品做出推薦幫助用戶做選擇，作為主頁面唯一一個承載豐富內(nèi)容的窗口（其他都為功能選項或廣告）钾军，其對大部分無明確目的的用戶的重要性不言而喻鳄袍。
缺陷一：三個標(biāo)簽欄與上層的廣告欄距離太近
從圖10 中我們可以看到廣告欄距熱門推薦欄的距離（1）較廣告欄距功能欄的距離（2）近很多。甚至（2）都快接近熱門推薦標(biāo)簽欄與具體內(nèi)容（3）之間的距離了吏恭。將（2）距離擴(kuò)大可以分清廣告欄與熱門推薦欄之間的界限從而增強(qiáng)熱門推薦欄的閉合性拗小。
缺陷二：熱門推薦欄中各種背景使用混亂，視覺層次不明
其一樱哼、從圖11可以看到熱門推薦欄的分類標(biāo)簽（都在看哀九、話劇榜、音樂榜）的背景（箭頭1）與每場演出的簡介的背景顏色（箭頭2）及每個演出中間的分隔欄顏色（箭頭3）是相同的搅幅，只不過在背景條的長度與寬度之間有略微差別阅束，造成用戶不僅不能分辨分類標(biāo)簽欄（箭頭1）與簡介欄（箭頭2）之間的層級關(guān)系，而且簡介欄（箭頭2）與分隔欄（箭頭3）的顏色一致導(dǎo)致了用戶不能清楚分辨每上下兩個具體演出劇目之間的分隔界限茄唐。
其二息裸、每條劇目的標(biāo)題字體顏色（黑色）與簡介中字體的顏色是相同的，雖然標(biāo)題字體在大小上占據(jù)優(yōu)勢琢融，其視覺層級應(yīng)該相對較高界牡，但由于字體變小之后形成集群效應(yīng)簿寂，單位空間的視覺重量增加漾抬，所以造成標(biāo)題的視覺層級與簡介的視覺層級相差無幾（圖12可以看出）。
其三常遂、從圖12 中我們可以看出“售票中”所使用的橘黃色按鈕視覺重量較重纳令，但是“售票中”否有必要存在是一個問題，首先如果將一個已售罄的演出放置于熱門推薦欄克胳，我認(rèn)為其在《用戶體驗要素》中所說的范圍層已經(jīng)出現(xiàn)明顯的錯誤平绩、已經(jīng)偏離了戰(zhàn)略層給該欄目定下的盡量吸引用戶注意促進(jìn)沖動型消費的目的（作者自己揣測）。如果真將已售罄的劇目至于該欄漠另，用戶除了不感興趣地瀏覽一番或者是感興趣確什么也做不了捏雌，相對來說后一種更加糟糕，用戶會認(rèn)為自己受到了欺騙笆搓。其次性湿，據(jù)我觀察幾乎所有的劇目都是“售票中”，偶爾會有1-2個劇目顯示為“預(yù)定中”满败，也就是說用戶對于每場演出都是有解決方案的肤频。這就和我們每天見到的門類似，每一個劇目欄就是一扇門算墨，現(xiàn)在就是在每扇門上都用一張橘黃色的之上標(biāo)明“此門可開”宵荒，這種設(shè)計真是多此一舉。其實只要將門設(shè)計成門的樣子，也就是將劇目欄設(shè)計成可點擊的形態(tài)报咳，那么我們自然會在想要開門的時候去開門侠讯，在想看劇目的時候去點擊它。所以結(jié)合以上兩點暑刃，“售出中”完全沒有必要存在继低，既分散了寶貴的用戶注意力，又毫無用處稍走。
底部標(biāo)簽欄：
缺陷一：不應(yīng)該設(shè)置標(biāo)簽欄為半透明狀態(tài)
如圖13所示袁翁，底部標(biāo)簽欄為半透明狀態(tài)，首先設(shè)置成半透明狀態(tài)是沒有任何好處的婿脸，現(xiàn)APP可能是從提示用戶底部標(biāo)簽欄上面的熱門推薦欄是可以下拉的這一方面做考慮粱胜，但如果將熱門推薦欄的具體劇目能顯示一半隱藏一半（圖14）用戶就不需要透明的底部標(biāo)簽欄作相應(yīng)的提示了。其次狐树，將底部標(biāo)簽欄設(shè)置成透明焙压，在底部標(biāo)簽欄與熱門推薦欄之間會形成相應(yīng)的聯(lián)系，會形成格式塔原則中的主體-背景聯(lián)系抑钟，但其實兩者之間無論是內(nèi)容還是層級之間都毫無關(guān)系涯曲，而且標(biāo)簽欄中的icon顯示效果會大打折扣，提高了用戶的認(rèn)知成本在塔。
缺陷二：標(biāo)簽欄背景與icon的搭配不協(xié)調(diào)
底部標(biāo)簽欄背景相對整個頁面顏色較淡幻件，整個標(biāo)簽欄的視覺層級都較低，而icon使用細(xì)線條設(shè)計也是給人較為輕盈的感覺蛔溃，所以即使顏色改變?yōu)殚冱S色也改變不了整個欄目輕浮的感覺绰沥。我們可以有兩種解決方案。一贺待、將icon塊狀化設(shè)計并填充橘黃色徽曲，大塊的橘黃色能為標(biāo)簽欄增重不少。二麸塞、將整塊標(biāo)簽欄背景色設(shè)置為橘黃色秃臣，并將各個icon進(jìn)行負(fù)空間設(shè)計，這樣的設(shè)計將底部標(biāo)簽欄與頂部的導(dǎo)航欄收尾呼應(yīng)哪工，不至于整個頁面的視覺重心主要集中于上2/3的頁面奥此。
重設(shè)計后首頁
重設(shè)計分析
相關(guān)文章：
西十區(qū)（ios版） 信息架構(gòu)重設(shè)計及體會
參考文章：
為你的眼睛做UI設(shè)計-格式塔心理學(xué)應(yīng)用于Web UI 設(shè)計 [譯]（part1）
為你的眼睛做UI設(shè)計-為空間設(shè)計做減法 [譯]（part2）
為你的眼睛做UI設(shè)計- 從對比到相似的視覺關(guān)系 [譯]（part3）
為你的眼睛做UI設(shè)計- 多彩的情緒：Web UI設(shè)計的視覺內(nèi)涵 [譯]（part4）
Design Principles: Visual Weight And Direction
參考書籍：
《用戶體驗要素》
《認(rèn)知與設(shè)計》
《Don't make me think》
