189 6508 9135
有時(shí)候，規(guī)劃師（或需求、交互）把內(nèi)容呈現(xiàn)的框架草圖搭建好后，就直接“丟”給了設(shè)計(jì)師，讓設(shè)計(jì)師在畫好的框架里去美化內(nèi)容，出來后的效果，往往達(dá)不到規(guī)劃師（或需求、交互）預(yù)期的目標(biāo)效果，然后就是反復(fù)的修訂和磨合。如何改變這樣的局面呢？我想首先規(guī)劃師（或需求、交互）的目標(biāo)要定義清楚，然后要做完善的信息架構(gòu)分析，內(nèi)容的主次位置、版塊結(jié)構(gòu)、所占面積都要細(xì)化考究，交給設(shè)計(jì)師的是一個(gè)盡量完善完整的框架方案，而設(shè)計(jì)師呢，必須全面理解目標(biāo)及內(nèi)容劃分的原因，幾方面結(jié)合，才能做出精美的設(shè)計(jì)作品。
舉個(gè)例子，我們把規(guī)劃比作“導(dǎo)演”，把需求和交互比作“編劇”，而他們最終輸出的內(nèi)容及框架圖比作“劇本”，把設(shè)計(jì)師比作“演員”；好的導(dǎo)演會(huì)選最好的“劇本”（符合目標(biāo)消費(fèi)者心理需求的故事），選最符合劇本角色風(fēng)格的“演員”去演繹，在拍攝前，會(huì)讓演員“熟讀劇本”，體會(huì)劇本中角色的氣質(zhì)及內(nèi)涵，充分了解劇本的主題思想及精髓，完全投入到劇本的情節(jié)中去，整個(gè)劇組中的人齊心協(xié)力，最后才能成就一部?jī)?yōu)秀的影視作品。假如，導(dǎo)演或劇本不好，不管演員演得多職業(yè)多賣力，讀者也不會(huì)買單；反過來，導(dǎo)演或劇本都很棒，而演員演繹能力很差，部分讀者也許會(huì)咬牙堅(jiān)持下去，但他們絕對(duì)體會(huì)不到故事的精髓。
總結(jié)一下要點(diǎn)：
規(guī)劃（需求、交互）一定要理解并找準(zhǔn)目標(biāo)用戶群體的心理需求，框架圖不僅僅是草圖，要方方面面更加完善的考慮，而不是一邊寫劇本，一邊讓演員去表演，感覺不對(duì)，再改劇本。
設(shè)計(jì)師一定要和規(guī)劃、需求、交互充分地溝通，要清楚設(shè)計(jì)目的，清楚內(nèi)容的組成及理由，讀透并理解整個(gè)規(guī)劃的思想精髓，在具體設(shè)計(jì)的時(shí)候，才能更好更直接有效地把內(nèi)容傳遞給目標(biāo)用戶。
下面，我舉一案例來輔助說明：
支付寶和財(cái)付通的目標(biāo)訴求及功能需求是基本一致的，我們來看看他們的首頁設(shè)計(jì)，分別有什么不同？
初步的整體感覺：財(cái)富通比支付寶的內(nèi)容要多，布局要復(fù)雜一些，界面要美觀。
一、外觀設(shè)計(jì)比較：
財(cái)付通：?jiǎn)螐脑O(shè)計(jì)角度來分析，色彩和圖形的美觀度要比支付寶的好。Banner的色彩搭配漂亮，圖標(biāo)的處理有特色。
支付寶：banner的左右兩塊過渡較生硬（人物和橙色區(qū)域）；整個(gè)界面缺乏細(xì)節(jié)設(shè)計(jì)，不夠耐看。
[nextpage_tab]
二、框架結(jié)構(gòu)比較：
財(cái)付通：從大的塊面感覺來分，有11個(gè)內(nèi)容區(qū)域，banner部分拆分為4個(gè)。結(jié)構(gòu)是左、上、下，但因?yàn)橹皇羌?xì)線框間隔內(nèi)容區(qū)，所以塊面的感覺不強(qiáng)烈，內(nèi)容的布局上就稍顯凌亂。
支付寶：和財(cái)付通一樣，11個(gè)內(nèi)容區(qū)，但因?yàn)樵O(shè)計(jì)師采用了背景色來區(qū)別不同內(nèi)容區(qū)，有重要層級(jí)顯示的引導(dǎo)性，所以，內(nèi)容不會(huì)顯得凌亂。頁面中凸顯的是橙色的banner口號(hào)區(qū)，弱化的是底部信息區(qū)，邏輯和順序感就出來了。
三、主要版塊內(nèi)容比較：
1、重要的banner區(qū)域，都傳達(dá)給用戶什么信息了呢？
財(cái)富通：大banner被分為4塊，安全、方便、優(yōu)惠以及口號(hào)“會(huì)支付，會(huì)生活”除了口號(hào)清楚明了以外，安全、方便、優(yōu)惠幾個(gè)字很小，已經(jīng)被華麗的圖標(biāo)質(zhì)感和鮮艷的色彩掩蓋了。
支付寶：大banner分為2塊，左邊是代表著用戶的大美女，右邊是體現(xiàn)實(shí)力的宣言“超過2億用戶的安全選擇”，輔助小字為：共享簡(jiǎn)單、安全、快捷的網(wǎng)上支付體驗(yàn)，具有親合力的美女，醒目的大標(biāo)語，傳達(dá)給用戶的信息，支付寶的內(nèi)容構(gòu)思很明顯比財(cái)付通更直接有效。
2、主要內(nèi)容區(qū)都有什么呢？
財(cái)富通：支付服務(wù)（含個(gè)人和企業(yè)），生活好幫手，還沒有財(cái)富通帳戶，支付好幫手，合作銀行，共5塊主要內(nèi)容，兩個(gè)廣告區(qū)。
支付寶：兩個(gè)大按鈕（輕松體驗(yàn)、免費(fèi)注冊(cè)），動(dòng)態(tài)信息區(qū)，個(gè)人用戶，企業(yè)用戶，流程演示，合作伙，公司動(dòng)態(tài)，新手問題，圓形標(biāo)簽圖，兩個(gè)廣告區(qū)。
[nextpage_tab]
3、對(duì)比一下，同樣是11塊區(qū)域，支付寶呈現(xiàn)的內(nèi)容更豐富。看看支付寶多出的內(nèi)容都有些什么作用呢？
兩個(gè)大按鈕：輕松體驗(yàn)（留住不太感興趣還在疑惑中的用戶），免費(fèi)注冊(cè)（方便感興趣的用戶，誘導(dǎo)他立即注冊(cè)）；
動(dòng)態(tài)信息區(qū)：即時(shí)傳達(dá)最新信息給用戶；
流程演示：圖形化的展示，更直觀有效的告訴用戶操作的簡(jiǎn)單快捷性；
公司動(dòng)態(tài)：既是新聞窗口也是對(duì)用戶的一種貼心服務(wù)；
新手問題：幫助新手即時(shí)快捷地解決問題；
圓形的動(dòng)態(tài)標(biāo)簽圖：是企業(yè)的品牌宣傳，是用戶的心聲宣言，是綜合實(shí)力的表現(xiàn)。
四、交互設(shè)計(jì)細(xì)節(jié)比較：
支付寶還有兩處細(xì)節(jié)設(shè)計(jì)很體貼：一是“立即充值”按鈕處，增加了“送積分”的冒泡效果，屬于誘惑式營(yíng)銷的方式；另一個(gè)設(shè)計(jì)細(xì)節(jié)是動(dòng)態(tài)信息公告，為了頁面簡(jiǎn)約和節(jié)省空間，只放了一條信息，而一條信息很容易被其他版塊內(nèi)容淹沒，設(shè)計(jì)師對(duì)這個(gè)區(qū)域作了重色處理，讓用戶一眼能看到，又不會(huì)占用太大空間，同時(shí)，右端有5個(gè)小圓點(diǎn)，表示信息的輪換，告訴用戶這里有5條信息，目前顯示在第幾條。
總結(jié)一下：
財(cái)富通的內(nèi)容規(guī)劃、版塊構(gòu)成及內(nèi)容呈現(xiàn)，沒有支付寶好，傳達(dá)給用戶的信息量少；支付寶顯得更加專業(yè)、更具實(shí)力、更貼近用戶的心智模型；我相信，支付寶在做內(nèi)容規(guī)劃和版塊布局時(shí)，是充分分析了目標(biāo)用戶的心理需求的。
財(cái)富通的視覺設(shè)計(jì)能力強(qiáng)，色彩和質(zhì)感的體現(xiàn)都比支付寶好，banner處的3個(gè)圖標(biāo)很時(shí)尚美觀，甚至前衛(wèi)，但真正傳遞給用戶什么信息？值得思考；支付寶的視覺設(shè)計(jì)，從頁面的表現(xiàn)來看，技能應(yīng)該沒有財(cái)富通強(qiáng)，但設(shè)計(jì)師充分考慮了內(nèi)容的呈現(xiàn)，主次關(guān)系，從整體效果來看，是更成功的商業(yè)視覺設(shè)計(jì)師。