零：項(xiàng)目背景

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

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

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

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

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

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

一. 再談術(shù)語(yǔ)

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

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

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

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

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

舉個(gè)例子：

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

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

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

　　怎樣的軟件應(yīng)用類商店是最完善的呢? 如何使軟件應(yīng)用類“商店”提升為“shopping mall”呢？對(duì)此，本文從shopping mall的規(guī)劃原則著手，找尋其與軟件應(yīng)用商店的共通點(diǎn)。通過(guò)任務(wù)和場(chǎng)景對(duì)現(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)該是集倉(cāng)儲(chǔ)、商場(chǎng)、服務(wù)與一身的軟件應(yīng)用中心。就如一個(gè)完善的購(gòu)物中心，銷售的是種類各異的軟件。下圖從角色、任務(wù)和場(chǎng)景3個(gè)方面對(duì)shopping mall和軟件、應(yīng)用商店進(jìn)行對(duì)比分析。

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

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

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

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

每天我的郵箱都會(huì)收到很多系統(tǒng)郵件。有些是網(wǎng)購(gòu)訂單的狀態(tài)通知，有些是網(wǎng)站活動(dòng)宣傳，有些是社交網(wǎng)站消息提醒。相信大家也都有和我一樣的煩惱：怎么老是這么多垃圾郵件！淹沒(méi)掉我重要的郵件啦！煩死啦！！你們有沒(méi)有為我們著想啊！！ 其實(shí)從交互的交互來(lái)看這些郵件，還是有很多的學(xué)習(xí)地方的，俗話說(shuō)：三人行，必有我?guī)熝伞衿渖普叨鴱闹洳簧普叨闹Ｋ越裉煳覀儊?lái)一起從分析下這些郵件。

我們先來(lái)普及郵件的幾個(gè)概念 （棕色字摘抄于同事heidi的博文 —— 讓電子郵件更給力 ）：

幾個(gè)重要的假設(shè)前提

     1. 很少有人愿意閱讀長(zhǎng)郵件 ——除非你告訴他不讀會(huì)怎么樣，賦予他責(zé)任

     2. 很少有人愿意無(wú)理由主動(dòng)做什么事情 ——特別可做可不做時(shí)，除非價(jià)值觀特別好，喜歡多管閑事

      3.很少有人會(huì)仔細(xì)閱讀你的郵件 ——千萬(wàn)不要發(fā)一封面向很多人的郵件，然后指望大家都在里面仔細(xì)閱讀找出你期待他做什么事情。

不好的郵件特征

    1.寫成散文，長(zhǎng)而枯燥，又期待人去閱讀——這是不現(xiàn)實(shí)的  

      2.重點(diǎn)不突出，反而依賴收件人去提取關(guān)鍵信息：時(shí)間、行動(dòng)、目標(biāo)

     3.群發(fā)，導(dǎo)致郵件無(wú)針對(duì)性——《影響力》一書的觀點(diǎn)時(shí)，如此會(huì)導(dǎo)致責(zé)任感被稀釋和分散，發(fā)送的人越多，真正有價(jià)值的回應(yīng)會(huì)越少

與此對(duì)應(yīng)，好的電子郵件應(yīng)該讓收件人一眼就掃到 重點(diǎn)：是什么，作為收件人，我需要在什么時(shí)間做什么。

我們對(duì)系統(tǒng)郵件給一個(gè)區(qū)分：1.不必要處理郵件（純宣傳郵件），2.必要處理郵件（購(gòu)物訂單狀態(tài)通知），3.可選處理郵件（社交網(wǎng)站消息提醒）