隨著互聯(lián)網(wǎng)信息爆炸式增長(zhǎng)，用戶瀏覽單個(gè)網(wǎng)頁(yè)時(shí)，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，為什么？

一、 視覺層級(jí)為什么重要

左側(cè)是設(shè)計(jì)師期望用戶的瀏覽方式，右側(cè)為用戶實(shí)際的瀏覽方式—摘自《Don’t make me think》

用戶來到一個(gè)網(wǎng)站有他自己特定的目標(biāo)，如閱讀新聞、購(gòu)物、查看新消息，然而信息量太大，逐一查看需要大量時(shí)間，這就要求網(wǎng)站能抓住主流用戶特征，將重點(diǎn)推送給他，用戶找到自己的目標(biāo)或感興趣的點(diǎn)，才有可能繼續(xù)瀏覽或產(chǎn)生下一步動(dòng)作，否則就會(huì)離開。

用戶時(shí)間有限加上互聯(lián)網(wǎng)信息量巨大，這兩項(xiàng)原因正是考驗(yàn)視覺設(shè)計(jì)師要建立良好的視覺層級(jí)呈現(xiàn)給用戶，幫助用戶快速找到目標(biāo)的功力。

總結(jié)一下，建立有效的視覺層級(jí)主要從以下四個(gè)方面著手：

1、簡(jiǎn)約： 有選擇的展現(xiàn)信息，讓用戶在有限的信息中發(fā)現(xiàn)重點(diǎn)

2、組織： 預(yù)先對(duì)信息進(jìn)行科學(xué)的分類，整理好優(yōu)先級(jí)，可以得到更好的傳播效果

3、呈現(xiàn)： 多種表現(xiàn)方法結(jié)合，呈現(xiàn)最好的視覺層級(jí)效果，這個(gè)點(diǎn)細(xì)化后有很多可挖，這里總結(jié)了幾個(gè)點(diǎn)，歡迎繼續(xù)哈

4、引導(dǎo)： 遵循用戶習(xí)慣，同時(shí)給予適當(dāng)?shù)囊龑?dǎo)推薦

　怎樣的設(shè)計(jì)能給人留下深刻印象？

　　名人效應(yīng) （借助名人或明星效應(yīng)，產(chǎn)生不言而喻的說服力）

　　每人內(nèi)心都有自己仰慕或效仿的對(duì)象，而且有一種想盡可能地向他靠近的心理欲求，從而獲得心理上的滿足。在選擇人物形象時(shí)必須要與產(chǎn)品的品格相吻合、使用戶快速理解產(chǎn)品傳遞的特點(diǎn)和價(jià)值，比如我們以往的設(shè)計(jì)作品中經(jīng)常會(huì)使用到馬云的形象，他在互聯(lián)網(wǎng)具有極高的話語(yǔ)權(quán)，選擇用他的形象來推廣產(chǎn)品能產(chǎn)生不可言喻的說服力，當(dāng)然你不能濫用。

　　時(shí)勢(shì)結(jié)合 （緊隨潮流，激發(fā)思想和感情上的共鳴）

　　結(jié)合當(dāng)前社會(huì)事件如釣魚島、奧運(yùn)會(huì)、中秋節(jié)、中國(guó)好聲音等等，或當(dāng)下流行的語(yǔ)言詞匯如屌絲、高富帥、白富美等等，緊隨潮流的事物反應(yīng)當(dāng)下的社會(huì)形態(tài)，潛移默化的感染到用戶的思想或感情，產(chǎn)生震撼和共鳴。下面的例子就是結(jié)合現(xiàn)在最流行最熱門的節(jié)目“中國(guó)好聲音”。

大多數(shù)的設(shè)計(jì)師都習(xí)慣在紙上開始自己的工作，假如你也是設(shè)計(jì)師，想必手上也有一兩本筆記本，上面隨手記了一些漂亮的草稿吧。不管你的草稿有多草(糙)，都是值得自豪的，為什么不亮出來給別人看看呢？

　　別的設(shè)計(jì)師的草稿都是什么樣子的呢？

　　Buzz Usborne, Campaign Monitor (活動(dòng)監(jiān)測(cè))

　　先來看看 Buzz 的設(shè)計(jì)草稿

　　草稿里的對(duì)角線和最終成品的對(duì)角錢相呼應(yīng)，Buzz 的草稿并不強(qiáng)調(diào)細(xì)節(jié)，而是注意線條和指引的清晰程度。

　　Buzz 的成品

［總結(jié)］：在用戶的視角來看，我們也希望他看到的都是最簡(jiǎn)單最愉悅的一面。作為客戶培訓(xùn)師，你不需要知道產(chǎn)品數(shù)據(jù)在我們后臺(tái)是存儲(chǔ)在什么服務(wù)器的。用戶搜索產(chǎn)品時(shí)，也更加不需要了解一個(gè)檢索詞是經(jīng)過了多少詞解析判斷計(jì)算，跑了幾臺(tái)服務(wù)器，最終把結(jié)果呈現(xiàn)給他的。但是作為工作人員，我們得了解需要怎么做，才能夠把最簡(jiǎn)單最愉悅的結(jié)果呈現(xiàn)出來。（Heidi注：如圖5所示）

圖5：簡(jiǎn)明網(wǎng)站產(chǎn)品建設(shè)流程圖

這個(gè)圖呈現(xiàn)的流程，依賴于多個(gè)部門的通力合作。從戰(zhàn)略層高瞻遠(yuǎn)矚的判斷、從產(chǎn)品經(jīng)理對(duì)于市場(chǎng)的分析以及功能、內(nèi)容的規(guī)劃、描述，到用戶體驗(yàn)團(tuán)隊(duì)，開發(fā)和測(cè)試團(tuán)隊(duì)的全力配合，而網(wǎng)站產(chǎn)生后，還要依賴于SEO、市場(chǎng)營(yíng)銷、銷售和客服的工作。

成功的網(wǎng)站，一定是多個(gè)部門一起圍繞相同目標(biāo)運(yùn)作的結(jié)果，但是其中一個(gè)環(huán)節(jié)失敗，則可能會(huì)造成全盤皆輸。

本文雖然篇幅已經(jīng)很長(zhǎng)，但是涉及到具體的流程、方法，都只能簡(jiǎn)單帶過，希望大家要記住這是對(duì)話的場(chǎng)景，不要以偏概全哦。
你對(duì)他提出的問題，想如何回答呢？如果你有問題，質(zhì)疑，鼓勵(lì)……歡迎交流。

離開交互圈已經(jīng)有段時(shí)間了。但由于博客還在，還是能夠偶爾收到一些郵件，上周有位同學(xué)問我：我在求職，我看到很多招聘說明上需要交互設(shè)計(jì)師編寫界面交互設(shè)計(jì)文檔 ，請(qǐng)問界面交互設(shè)計(jì)文檔是什么文檔？怎么編寫呢

 

所謂DRD即是用來承載交互說明，并交付給前端、測(cè)試以及開發(fā)工程師參考的文檔。

 

在項(xiàng)目中，交互設(shè)計(jì)師的主要產(chǎn)出物可能依次是：site map，page flow，wireframes。有的大型項(xiàng)目前期，交互設(shè)計(jì)師有可能還會(huì)產(chǎn)出用戶需求分析文檔（與PD產(chǎn)出的市場(chǎng)需求文檔不一樣的是，URD更多側(cè)重于對(duì)目標(biāo)用戶的需求分析）。

 

DRD則很少有人專門撰寫。如果需要對(duì)交互設(shè)計(jì)進(jìn)行說明，聰明的交互設(shè)計(jì)師往往會(huì)直接標(biāo)注在線框圖里，或者在項(xiàng)目中不斷和前端工程師和開發(fā)工程師口口相傳，反復(fù)驗(yàn)收，不斷迭代修改來確保所有的交互設(shè)計(jì)意圖最終得以呈現(xiàn)。

二. 為什么要寫？

 

DRD非項(xiàng)目必需環(huán)節(jié)，一般情況下也不會(huì)為交互設(shè)計(jì)師專門留出相應(yīng)的時(shí)間預(yù)估。沒有這份文檔，項(xiàng)目也會(huì)繼續(xù)，但是可能項(xiàng)目會(huì)為此承擔(dān)不必要的溝通成本和時(shí)間成本。嚴(yán)重的話，項(xiàng)目的質(zhì)量也會(huì)受到影響。所以寫與不寫，交互設(shè)計(jì)師需要做把握，時(shí)間被統(tǒng)一包含在“線框圖”環(huán)節(jié)內(nèi)——如果你要寫，請(qǐng)?jiān)谠u(píng)估時(shí)預(yù)留1-2天的時(shí)間。

 

那么，結(jié)合我過去的經(jīng)歷，談一下此文檔的必要性。

 

下圖是一個(gè)產(chǎn)品開發(fā)項(xiàng)目基本的流程。

 

敏捷開發(fā)意味著很多不同角色的流程需要并行操作。如果等到產(chǎn)品經(jīng)理的FRD已經(jīng)全部敲定，交互設(shè)計(jì)師再開始去畫線框圖，固然會(huì)減少溝通成本和返工風(fēng)險(xiǎn)，但是同時(shí)意味著交互設(shè)計(jì)師的很多想法不被采納。如果產(chǎn)品經(jīng)理再?gòu)?qiáng)一些，他甚至?xí)贔RD里連原始的DEMO也一并繪制出來了，功能性的需求和界面交互的需求有時(shí)無法區(qū)分太清楚——比如他會(huì)在FRD里直接要求每頁(yè)條目40條，超過40條即分頁(yè)。而交互設(shè)計(jì)師可能會(huì)認(rèn)為像蘑菇街那樣不斷裝載出足夠長(zhǎng)的頁(yè)面會(huì)更親和……所以，我們希望是和產(chǎn)品經(jīng)理同時(shí)開始工作，在術(shù)業(yè)有專攻的時(shí)候相互補(bǔ)充。

 

同樣，開發(fā)工程師也希望及早介入需求，在FRD并未確認(rèn)的時(shí)候就了解需求，進(jìn)而將商業(yè)需求和功能需求轉(zhuǎn)化為開發(fā)工程師看得明白的開發(fā)需求清單（這個(gè)清單，大部分叫做UC，即USE CASE）,當(dāng)這份清單由工程師需求分析師——在過去，這個(gè)角色被叫簡(jiǎn)稱為RA，但是目前已經(jīng)取消此專門的職位，而是由開發(fā)工程師代表?yè)?dān)綱此環(huán)節(jié)工作，為了便于描述，在此文里，我仍然將做這件事情的人稱為RA——交付給具體的執(zhí)行工程師后，執(zhí)行工程師基本上可以當(dāng)作一條條的checklist開始工作，而不必再思考商業(yè)邏輯和需求。同樣，測(cè)試工程師也需要編寫具體的文檔去指導(dǎo)很多測(cè)試人員在開發(fā)后測(cè)試，這也是基于UC和FRD去撰寫的。

 

作為設(shè)計(jì)師的我們，每天都在與字體打交道，我們常常希望能很好的使用他們，為設(shè)計(jì)加油添彩。我們常常納悶，電腦里這么多的字體，要用哪一個(gè)？文字有這么多，怎樣排版才能表達(dá)內(nèi)心深處的思想？

常常說，藝術(shù)是相通的。將文字排版與音樂結(jié)合起來，用視覺化的音樂和文字排版相結(jié)合，會(huì)讓我們的字體排版更容易組合，更能體現(xiàn)我們的設(shè)計(jì)情感。

將普通的文字賦予音樂的藝術(shù)形式，將文字排版賦予聽覺的美感和視覺的美妙，更容易傳遞信息，表達(dá)其深層次的涵義。

當(dāng)音樂響起時(shí)，電腦播放器里變化雀躍的頻譜圖，音響喇叭發(fā)生震動(dòng)產(chǎn)生的聲波，跳動(dòng)的五線譜和樂器發(fā)生引起的變化圖(A-01)，都是我們體現(xiàn)情感的視覺化形式。