??
1、網(wǎng)頁界面布局
手機(jī)端網(wǎng)頁的界面布局設(shè)計(jì)中考慮到手機(jī)用戶更多的是采用垂直滾動的方式瀏覽。由于手機(jī)屏幕的尺寸較小, 字號大小也受到限制, 為了不影響閱讀, 手機(jī)端網(wǎng)頁應(yīng)控制單個頁面的內(nèi)容量, 突出重點(diǎn)視覺元素, 避免界面雜亂。同時精簡文字, 將冗長的信息內(nèi)容劃分為多重頁面。網(wǎng)頁界面設(shè)計(jì)中應(yīng)突出按鈕的位置, 按鈕的尺寸應(yīng)當(dāng)和手指的大小相匹配。
2、視覺隱喻的運(yùn)用
圖像閱讀是人類普遍具有的能力, 它能夠直接調(diào)動讀者的感性經(jīng)驗(yàn)和視覺思維。在圖形用戶界面中用戶通過把這些帶有隱喻的圖形與其熟悉的事物聯(lián)系在一起, 從而理解界面中各個控件的功能。
在手機(jī)端網(wǎng)頁設(shè)計(jì)中, 圖像也不僅僅是傳遞信息的一種介質(zhì), 同時也可以利用視覺隱喻的原理承擔(dān)著幫助用戶在界面視覺元素與網(wǎng)頁互動機(jī)制之間建立直覺聯(lián)系, 進(jìn)而減少用戶的學(xué)習(xí)成本。
3、字體使用
盡管圖像在數(shù)字閱讀時代越來越受到青睞, 但文字依然是人類獲取信息的主要介質(zhì)。隨著科技的發(fā)展, 今天, 5寸左右的手機(jī)屏幕像素?cái)?shù)量已與電腦屏幕相當(dāng) (如1 080×1 920) , 其像素密度普遍超過300PPI, 幾乎接近一般打印效果。這給手機(jī)端網(wǎng)頁字體的選擇帶來更大的自由, 更多樣的中文字體可以被使用, 極大地豐富了網(wǎng)頁視覺風(fēng)格。
盡管如此, 手機(jī)端網(wǎng)頁在使用字體時還需要考慮屏幕尺寸的限制, 為了讓信息層級清晰, 避免界面雜亂, 應(yīng)盡量控制網(wǎng)頁文字的字體類型和字號的數(shù)量。
4、色彩設(shè)計(jì)
使用不同的色彩可以帶給用戶不同的感覺。在一些領(lǐng)域中, 顏色具有特殊的意義, 在不同的文化環(huán)境中顏色的含義也不盡相同, 所以在網(wǎng)頁視覺設(shè)計(jì)時網(wǎng)頁的色彩不但要與主題內(nèi)容所傳達(dá)的情感相契合，也要考慮讀者的文化背景。
色彩和其他視覺元素一樣不僅用于傳達(dá)內(nèi)容和情緒, 也承擔(dān)著網(wǎng)頁層次結(jié)構(gòu)的梳理功能。在手機(jī)端網(wǎng)頁的色彩設(shè)計(jì)中往往會根據(jù)內(nèi)容和結(jié)構(gòu)設(shè)定主色, 標(biāo)準(zhǔn)色和對比色。主色決定了整個系列網(wǎng)頁的視覺風(fēng)格, 一般作為底色使用或者使用在每頁的一個固定位置上, 起到定調(diào)的作用。標(biāo)準(zhǔn)色指的是整套移動界面的色彩規(guī)范, 確定文字、線段、圖標(biāo)等的顏色。對比色通常會用在標(biāo)題、按鈕等地方, 起強(qiáng)調(diào)和引導(dǎo)的作用。
5、動畫設(shè)計(jì)
隨著網(wǎng)頁技術(shù)的發(fā)展, 在手機(jī)端網(wǎng)頁實(shí)現(xiàn)各種形式的動畫效果 (以下簡稱動效) 變得更加容易, 和影視動畫不同, 網(wǎng)頁動畫效果常常肩負(fù)著對網(wǎng)頁信息結(jié)構(gòu)和交互的展示、引導(dǎo)、反饋等作用。
網(wǎng)頁動效一般在網(wǎng)頁中起到以下幾種作用。
1) 強(qiáng)調(diào)。通過網(wǎng)頁動效的添加對網(wǎng)頁的重要信息和功能進(jìn)行暗示和指導(dǎo)。例如重要文字信息的出現(xiàn)動畫、按鈕的閃爍等。
2) 反饋。通過網(wǎng)頁中視覺元素的出現(xiàn)和消失, 以及大小、位置和透明度的變化對用戶的交互行為進(jìn)行反饋, 使用戶和網(wǎng)頁的交互過程更加流暢。
3) 層級展現(xiàn)。通過網(wǎng)頁頁面或個別視覺元素的縮放、覆蓋、滑出等動效幫助用戶理解網(wǎng)頁信息架構(gòu)。常用與網(wǎng)頁的轉(zhuǎn)場和菜單的展開。
4) 模擬。一些動效通過對現(xiàn)實(shí)世界的模擬迎合用戶的認(rèn)知。用戶通過對現(xiàn)實(shí)世界的認(rèn)知來理解網(wǎng)頁的功能, 增強(qiáng)了用戶對頁面的操縱感和帶入感。
5) 后臺進(jìn)程的可視化。典型例子是各種加載動畫, 不僅讓等待的時間變得可預(yù)期, 也增加了網(wǎng)頁的趣味性。
6、交互設(shè)計(jì)
交互設(shè)計(jì)是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域, 它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu), 使之互相配合, 共同達(dá)成某種目的。
在網(wǎng)頁交互設(shè)計(jì)中應(yīng)滿足以下幾點(diǎn)。
1) 可操作性。用戶為激活某對象所需觸摸的屏幕區(qū)域有充分的空間以便用戶準(zhǔn)確操作。
2) 易學(xué)性。通過對視覺隱喻等原理的運(yùn)用引導(dǎo)用戶的交互行為, 并注重交互界面設(shè)計(jì)中具有相同功能按鈕的統(tǒng)一性, 以降低用戶對交互界面的學(xué)習(xí)成本。
3) 可知性。通過網(wǎng)頁動畫等方式對用戶的交互動作予以反饋, 讓用戶了解自己的操作是否成功。
4) 必要性。在網(wǎng)頁中加入交互環(huán)節(jié)其實(shí)也在增加用戶的操作步驟和網(wǎng)頁程序的運(yùn)算量, 應(yīng)充分考慮其必要性。
二、在設(shè)計(jì)手機(jī)網(wǎng)站的時候，還有一些必須要注意和思考的事情
1、了解你的目標(biāo)受眾
互聯(lián)網(wǎng)工作的好處之一是你可以使用數(shù)據(jù)分析去追蹤任何數(shù)據(jù)，合理利用這些數(shù)據(jù)可以讓你的公司業(yè)務(wù)取得巨大的改善。所以當(dāng)你準(zhǔn)備為移動用戶設(shè)計(jì)網(wǎng)站時，不要只滿足于“一體通用”的方案。
分析這些數(shù)據(jù)，找出你的訪問者大多數(shù)是使用哪種設(shè)備，而你的設(shè)計(jì)方案應(yīng)該以此為基礎(chǔ)。你可能會驚訝的發(fā)現(xiàn)他們中的絕大多數(shù)人根本不用iPhone 或安卓手機(jī)。
當(dāng)你得到你想要的信息后你就可以建立一個方便絕大多數(shù)受眾瀏覽的網(wǎng)站。當(dāng)然你仍然要確保你的網(wǎng)站兼容其他設(shè)備。
2、內(nèi)容才是王道
由于移動網(wǎng)站的功能往往比完整網(wǎng)站的功能少得多，設(shè)計(jì)師就要優(yōu)先將訪問者需要的內(nèi)容放進(jìn)去，并確保它們?nèi)菀妆徽业健ＭL問者要找的內(nèi)容僅僅是你的聯(lián)系信息，像手機(jī)號碼，電子郵箱之類的，所以你需要將它們突出顯示，而且要在觸摸屏上易于點(diǎn)擊。但有時他們也會想要看一些具體的信息，甚至是下訂單的按鈕——如果這些內(nèi)容你能設(shè)計(jì)得容易被查找和操作的話，你的移動用戶將會獲得很棒的用戶體驗(yàn)。
3、多為觸屏用戶考慮
就像我剛才有稍微提到的，當(dāng)用戶在移動設(shè)備上瀏覽你的網(wǎng)站時，確保上面的每一個地方易于點(diǎn)擊是非常重要的——這也就意味著為了讓你的用戶有一個很好的瀏覽體驗(yàn)，你要試著加大網(wǎng)頁上的按鈕和鏈接，這樣才能讓手指毫不費(fèi)力的點(diǎn)到。同時，不要忘了在按鈕和鏈接之間保留足夠的留白，這樣用戶在點(diǎn)擊的時候才不會造成誤觸。
4、遵循簡約的設(shè)計(jì)風(fēng)格
記住，當(dāng)設(shè)計(jì)一個移動網(wǎng)站的時候，你的目標(biāo)不是要讓你的訪問者覺得“哇!這個網(wǎng)站好漂亮”，而是要引導(dǎo)他們最快的找到信息而不用擔(dān)心浪費(fèi)了太多的時間和流量。這也是為什么你要精心規(guī)劃你的網(wǎng)站，保留重要的部分并保持簡單的設(shè)計(jì)，丟掉那些花哨的裝飾。雖然這樣，但也不能走向另一個極端——在網(wǎng)頁設(shè)計(jì)中既要保持簡單也要追求優(yōu)雅，盡量在同類網(wǎng)站有獨(dú)樹一幟的風(fēng)格而不淪為平庸。
5、選擇單列的布局
在為桌面用戶設(shè)計(jì)網(wǎng)站時你可以有很多的布局方案可以選擇，但對于移動用戶如果想要讓設(shè)計(jì)易于瀏覽的話，就只有一種選擇了。盡管現(xiàn)智能手機(jī)也有用了相對比較大的屏幕，當(dāng)你為了去看完整的信息不得不滾動多個列時仍然是一件繁瑣的事情，所以堅(jiān)持單列布局才是最好的選擇。
6、學(xué)會整合社交媒體
移動用戶最大好處之一是：他們樂于用過社交媒體分享身邊的任何事情。這對你來說是個天大的好消息，如果你設(shè)計(jì)的網(wǎng)站能讓用戶輕松分享他們感興趣的內(nèi)容到社交媒體上，那么他們也將為你帶來龐大的流量。所以，一定要在網(wǎng)頁上放一個連接到你的社交網(wǎng)站的鏈接。同時在所有的頁面上都要有Facebook，Google+，linkedln，Twitter等社交媒體的按鈕。
