淺析網(wǎng)頁設計與內(nèi)容呈現(xiàn)的層次關系

1、有時候，規(guī)劃師（或需求、交互）把內(nèi)容呈現(xiàn)的框架草圖搭建好后，就直接“丟”給了設計 師，讓設計師在畫好的框架里去美化內(nèi)容，出來后的效果，往往達不到規(guī)劃師（或需求、交 互）預期的目標效果，然后就是反復的修訂和磨合。如何改變這樣的局 面呢？我想首先規(guī) 劃師（或需求、交互）的目標要定義清楚，然后要做完善的信息架構(gòu)分析，內(nèi)容的主次位置、 版塊結(jié)構(gòu)、所占面積都要細化考究，交給設計師的是一個盡量完善完整的框架方案，而設 計師呢，必須全面理解目標及內(nèi)容劃分的原因，幾方面結(jié)合，才能做出精美的設計作品。舉個例子，我們把規(guī)劃比作“導演”，把需求和交互比作“編劇”，而他們最終輸出的內(nèi)容及框 架圖比作“劇本”，把設計師

2、比作“演員”；好的導演會選最好的“劇本”（符合目標消費者心理 需求的故事），選最符合劇本角色風格的“演員”去演繹，在拍攝前，會讓演員“熟讀劇本”， 體會劇本中角色的氣質(zhì)及內(nèi)涵，充分了解劇本的主題思想及精髓，完全投入到劇本的情節(jié) 中去，整個劇組中的人齊心協(xié)力，最后才能成就一部優(yōu)秀的影視作品。假如，導演或劇本不 好，不管演員演得多職業(yè)多賣力，讀者也不會買單；反過來，導演或劇本都很棒，而演員 演繹能力很差，部分讀者也許會咬牙堅持下去，但他們絕對體會不到故事的精髓?？偨Y(jié)一下要點:1、規(guī)劃（需求、交互）一定要理解并找準目標用戶群體的心理需求，框架圖不僅僅是草圖，要方方面面更加完善的考慮，而不是一邊寫劇本

3、，一邊讓演員去表演，感覺不對，再改劇本。2、設計師一定要和規(guī)劃、需求、交互充分地溝通，要清楚設計目的，清楚內(nèi)容的組成及理由，讀透并理解整個規(guī)劃的思想精髓，在具體設計的時候，才能更好更直接有效地把內(nèi)容傳 遞給目標用戶。下面，我舉一案例來輔助說明:支付寶和財付通的目標訴求及功能需求是基本一致的，我們來看看他們的首頁設計，分別有 什么不同？初步的整體感覺：財富通比支付寶的內(nèi)容要多，布局要復雜一些，界面要美觀。一、外觀設計比較：財付通：單從設計角度來分析，色彩和圖形的美觀度要比支付寶的好。Banner的色彩搭配 漂亮，圖標的處理有特色。支付寶：banner的左右兩塊過渡較生硬（人物和橙色區(qū)域）；整個界

4、面缺乏細節(jié)設計，不 夠耐看。生活好幫手?；?，觸蝴生舌群琴手TUlSFtlE 用票訂腳信用卡1T敏I專黑代底I購賣辛我布倩|岌隊包 演夸花領取域買作雙導醐EE前:主舊州摳岐戶 口叩0.源主若射忖駒堿斕主騷會亶付、.會 廣節(jié)割t卡魅問上競同的通粕 叫付ii全面底均中宥充防和玉時程理一.巨通I 岫通企出阪仃ik解決行尹苞伯如器巍我如那!佑TJF曲心苞蹄宙弟加不月信耳舉報屯心有*攝浦思挺據(jù)互聯(lián)肝:青EW鈉|期勘1強購颯認還會偷行： & 斧少 s （&詹Eg 驪理3- S關于師F蟲喜瞇中心I胡的中心I順繭可赧戶安全駐系稱11賢訊慈司朋下網(wǎng)定處恃通年料期甘皿時r 皆通管段 1fllEiL2i*pZB2-2

5、0Q40031Ab pay, com 因 XHE任 iflLiflfiP*srJW-值王王 柬魚孟IB杵計母；O -xEPft.it!著去淀，念壇 使樂跆 宜斟禺乎-吾肌中， tfrlairiia t EP7m-方-me“？ I 機斐討寶;打擊時脾Eh噩嬖K馨o象擋注推j_ .I gTT-X萍I寶71通11忙月作支|尸山1娜！1 個人用戶絹躇納盅1扣# .13 = H至業(yè)用戶淘IkST略誠J璀行忘切就已三？g法用卡還敏.，|隔猊推廣寧甘J?發(fā)主社區(qū)支代寶噌誦aas銅點吏樹:首蛤邑襪.白地址辨E罟;去科安祁傳亥宅宙贍至畫葉巫 支村寶月P破輿破日伯二、框架結(jié)構(gòu)比較：財付通：從大的塊面感覺來分，有1

6、1個內(nèi)容區(qū)域，banner部分拆分為4個。結(jié)構(gòu)是左、上、下，但因為只是細線框間隔內(nèi)容區(qū)，所以塊面的感覺不強烈，內(nèi)容的布局上就稍顯凌亂。支付寶：和財付通一樣，11個內(nèi)容區(qū)，但因為設計師采用了背景色來區(qū)別不同內(nèi)容區(qū)，有 重要層級顯示的引導性，所以，內(nèi)容不會顯得凌亂。頁面中凸顯的是橙色的banner 口號區(qū)， 弱化的是底部信息區(qū)，邏輯和順序感就出來了。三、主要版塊內(nèi)容比較：1、重要的banner區(qū)域，都傳達給用戶什么信息了呢?財富通：大banner被分為4塊，安全、方便、優(yōu)惠以及口號會支付，會生活”除了 口號清 楚明了以外，安全、方便、優(yōu)惠幾個字很小，已經(jīng)被華麗的圖標質(zhì)感和鮮艷的色彩掩蓋了。支付寶：

7、大banner分為2塊，左邊是代表著用戶的大美女，右邊是體現(xiàn)實力的宣言“超過2億用戶的安全選擇”，輔助小字為：共享簡單、安全、快捷的網(wǎng)上支付體驗，具有親合力 的美女，醒目的大標語，傳達給用戶的信息，支付寶的內(nèi)容構(gòu)思很明顯比財付通更直接有效。2、主要內(nèi)容區(qū)都有什么呢？財富通：支付服務（含個人和企業(yè)），生活好幫手，還沒有財富通帳戶，支付好幫手，合作 銀行，共5塊主要內(nèi)容，兩個廣告區(qū)。 支付寶：兩個大按鈕（輕松體驗、免費注冊），動態(tài)信息區(qū)，個人用戶，企業(yè)用戶，流程演 示，合作伙，公司動態(tài)，新手問題，圓形標簽圖，兩個廣告區(qū)。3、對比一下，同樣是11塊區(qū)域，支付寶呈現(xiàn)的內(nèi)容更豐富?？纯粗Ц秾毝喑龅膬?nèi)容都

8、有些什么作用呢？（1）、兩個大按鈕：輕松體驗（留住不太感興趣還在疑惑中的用戶），免費注冊（方便感興趣的用戶，誘導他立即注冊）；（2）、動態(tài)信息區(qū)：即時傳達最新信息給用戶；（3）、流程演示：圖形化的展示，更直觀有效的告訴用戶操作的簡單快捷性；（4）、公司動態(tài)：既是新聞窗口也是對用戶的一種貼心服務；（5）、新手問題：幫助新手即時快捷地解決問題；（6）、圓形的動態(tài)標簽圖：是企業(yè)的品牌宣傳，是用戶的心聲宣言，是綜合實力的表現(xiàn)。mnl&is令套付金1活.糠i前a下時更付牛白生活拄備豐 優(yōu)菟主成！ 麗筮維務 曬中心玲第蕙17.由訴gfl；iffl S1 充，：我的財付通交易管理探棗 收款 仲效安全中心還沒

9、有財付通賬戶？支付服務個人T?財付通禎態(tài)臺作祖行:諾付活 勵會會生活好配手超過2億用戶的安全選擇共享簡單、安全 倒1的網(wǎng)上支伺怖甄*立馳gTTF硅7f通怕月公宣11*1）：跳!個人即戶阿出W睇用責t主忖林-*9EMJSRM.買賣款吏付全過理:前.宣*改F蜒講四、交互設計細節(jié)比較：支付寶還有兩處細節(jié)設計很體貼：一是“立即充值”按鈕處，增加了“送積分”的冒泡效果，屬 于誘惑式營銷的方式；另一個設計細節(jié)是動態(tài)信息公告，為了頁面簡約和節(jié)省空間，只放 了一條信息，而一條信息很容易被其他版塊內(nèi)容淹沒，設計師對這個區(qū)域作了重色處理，讓 用戶一眼能看到，又不會占用太大空間，同時，右端有5個小圓點，表示信息的輪換，告 訴用戶這里有5條信息，目前顯示在第幾條。2009-07-14 I支付寶開通“信用卡支付”功能啦總結(jié)一下：1、財富通的內(nèi)容規(guī)劃、版塊構(gòu)成及內(nèi)容呈現(xiàn)，沒有支付寶好，傳達給用戶的信 息量少；支付寶顯得更加專業(yè)、更具實力、更貼近用戶的心智模型；我相信，支 付寶在做內(nèi)容規(guī)劃和版塊布局時，是充分分析了目標用