零：項(xiàng)目背景

百度網(wǎng)盟推廣平臺是配合網(wǎng)盟推廣用戶的在線營銷平臺，推廣客戶可以在平臺上實(shí)現(xiàn)全方位的推廣管理，包括搭建賬戶結(jié)構(gòu)、配置預(yù)算、定向方式、監(jiān)控賬戶投放效果等等復(fù)雜的賬戶操作。但是由于系統(tǒng)的復(fù)雜度和功能性的增加，原有的系統(tǒng)對新功能的支撐顯得有些捉襟見肘，所以在今年8月份，我們開始了對系統(tǒng)體驗(yàn)的分析和優(yōu)化工作。

優(yōu)異的用戶界面可以讓用戶用得順心，從而提高轉(zhuǎn)化率(conversion rate)，換言之，好的 UI 在使用與銷售層面上形成雙贏。本文整理了16點(diǎn)優(yōu)化用戶界面的方法，希望對大家有所幫助。

　　單欄型式優(yōu)于多欄

　　單欄型式讓你更能掌握自己的內(nèi)容，從頂部到底部一氣嗬成，用故事引導(dǎo)讀者，最終是要誘引他們「采取行動」(call to action，下稱 CTA，意指下載或消費(fèi)等目的);而多欄反而可能導(dǎo)致讀者分心。

2011年10月，相繼寫了兩篇《交互設(shè)計(jì)那些事兒》（一）（二），至今已經(jīng)有兩年了。期間有不少新的想法伴隨著我的工作、交流涌現(xiàn)出來，加上幾周前，在新的團(tuán)隊(duì)又進(jìn)行了一次分享，頗有點(diǎn)心得，又懶得去重新修改原有文章，就在此進(jìn)行一些補(bǔ)錄吧。

還是個(gè)人經(jīng)驗(yàn)，眼界有限，歡迎拍磚。

一. 再談術(shù)語

面向?qū)换ケ容^陌生的團(tuán)隊(duì)進(jìn)行分享，少不得再介紹下那些讓人云里霧里的術(shù)語。這次，咱們?yōu)檫@些術(shù)語做一個(gè)關(guān)系圖：

從下至上是各種術(shù)語的演變史。中間代表“做的事情”，左邊代表做這件事情的“人”，右邊代表做這件事情需要的“指導(dǎo)思想”。

了解自己的學(xué)習(xí)特性

一個(gè)好的交互設(shè)計(jì)師往往了解自己學(xué)東西的特殊方式，并善加利用，所以有著較有效率、較明顯的成長。

學(xué)習(xí)與成長并不是件陌生的事，每個(gè)人都有自己的故事。試著回想你學(xué)習(xí)其他東西的行為與習(xí)慣，透過一些整理，你可以逐步認(rèn)識自己是怎樣的學(xué)習(xí)者，并試著讓你的團(tuán)隊(duì)知道與支持你。這可以是了解如何成長的第一步。身為一個(gè)設(shè)計(jì)團(tuán)隊(duì)的領(lǐng)導(dǎo)，也能在更了解組員的學(xué)習(xí)特性之后，一起創(chuàng)造出更合適的學(xué)習(xí)環(huán)境。

舉個(gè)例子：

• 某設(shè)計(jì)師的學(xué)習(xí)特性是…
• 我沒有辦法只看書或理論而產(chǎn)生我的設(shè)計(jì)觀點(diǎn)，我是一個(gè)從做中學(xué)的交互設(shè)計(jì)師。
• 不好玩、不友善的學(xué)習(xí)環(huán)境，我學(xué)不起來。

廢話少說，直接解釋吧（大致按照動手的時(shí)間順序，以數(shù)字媒體界面為例）。

　2011年各大移動應(yīng)用商店迅速崛起，群雄割據(jù)。在移動應(yīng)用商店的基礎(chǔ)上，軟件商店也悄然形成。這些軟件、應(yīng)用類商店形式多樣、風(fēng)格迥異。一些成功的應(yīng)用商店都已然向“shopping mall“邁進(jìn)：比如應(yīng)用商店的大贏家蘋果APP Store（i Pad、iPhone）， 國內(nèi)的安卓市場、網(wǎng)易應(yīng)用、騰訊應(yīng)用中心等等。這些商店成功的秘訣在于他們不僅僅將產(chǎn)品定位于一個(gè)簡單的提供應(yīng)用下載的工具，而是精心運(yùn)營和設(shè)計(jì)，創(chuàng)造出一站式提供應(yīng)用服務(wù)的場所。

　　怎樣的軟件應(yīng)用類商店是最完善的呢? 如何使軟件應(yīng)用類“商店”提升為“shopping mall”呢？對此，本文從shopping mall的規(guī)劃原則著手，找尋其與軟件應(yīng)用商店的共通點(diǎn)。通過任務(wù)和場景對現(xiàn)有的幾大應(yīng)用商店進(jìn)行分析，提煉軟件應(yīng)用類商店的設(shè)計(jì)要素。

　　Shopping mall的定義是：大型零售業(yè)為主體，眾多專業(yè)店為輔助業(yè)態(tài)和多功能商業(yè)服務(wù)設(shè)施形成的聚合體。而一個(gè)完善的軟件應(yīng)用類商店應(yīng)該是集倉儲、商場、服務(wù)與一身的軟件應(yīng)用中心。就如一個(gè)完善的購物中心，銷售的是種類各異的軟件。下圖從角色、任務(wù)和場景3個(gè)方面對shopping mall和軟件、應(yīng)用商店進(jìn)行對比分析。

構(gòu)建界面視覺層級的元素有顏色的顯著程度，圖片、文字的尺寸大小，還有最基礎(chǔ)的，內(nèi)容的組織結(jié)構(gòu)。

結(jié)構(gòu)設(shè)計(jì)是指對界面內(nèi)容進(jìn)行分組，對界面中的信息、數(shù)據(jù)進(jìn)行設(shè)計(jì)使之結(jié)構(gòu)化呈現(xiàn)的過程。

好的結(jié)構(gòu)設(shè)計(jì)能使界面信息傳達(dá)更加清晰、快捷。那么，如果進(jìn)行結(jié)構(gòu)設(shè)計(jì)呢？

本部分將結(jié)合已經(jīng)上線的QQ旅游訂票系統(tǒng)的分析，給出解決方案