網(wǎng)站設(shè)計(jì)與手機(jī)應(yīng)用設(shè)計(jì)的區(qū)別

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了網(wǎng)站設(shè)計(jì)與手機(jī)應(yīng)用設(shè)計(jì)的區(qū)別范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

與其他領(lǐng)域的設(shè)計(jì)師相比，網(wǎng)頁(yè)設(shè)計(jì)師需要與掌握這些技術(shù)的人充分合作。手機(jī)應(yīng)用設(shè)計(jì)作為第三方智能手機(jī)應(yīng)用程序的圖形用戶(hù)界面設(shè)計(jì)和交互設(shè)計(jì)，以移動(dòng)互聯(lián)網(wǎng)為平臺(tái)，逐漸把用戶(hù)帶入一個(gè)習(xí)慣使手機(jī)客戶(hù)端上網(wǎng)的時(shí)期。在應(yīng)用設(shè)計(jì)中美需要由功能來(lái)傳遞，每個(gè)界面元素都必須專(zhuān)注于當(dāng)下用戶(hù)所需。目前，各種手機(jī)應(yīng)用層出不窮，其數(shù)目可稱(chēng)之為鋪天蓋地。在appstore或是其他平臺(tái)上，手機(jī)應(yīng)用被大致分為幾大類(lèi)：系統(tǒng)工具、影音娛樂(lè)、網(wǎng)頁(yè)瀏覽、辦公閱讀、社交通信、生活百科、購(gòu)物、游戲等。網(wǎng)站設(shè)計(jì)與手機(jī)應(yīng)用設(shè)計(jì)的區(qū)別：

1.用戶(hù)體驗(yàn)的不同

（1）媒介的特性區(qū)別

傳統(tǒng)的網(wǎng)站都是通過(guò)計(jì)算機(jī)終端瀏覽，而手機(jī)應(yīng)用則是通過(guò)智能手機(jī)終端平臺(tái)使用和操作。操作的媒介具有不同的特性及用戶(hù)使用狀態(tài)。相比較而言，手機(jī)更靈活，可以隨身攜帶，用戶(hù)在行走中就可以完成操作，也就是說(shuō)人們只用一只手操作應(yīng)用，只用一部分注意力在你精雕細(xì)琢的界面上，也正因?yàn)槿绱?，這與作為設(shè)計(jì)師的你看到的應(yīng)用完全不同。

（2）鼠標(biāo)點(diǎn)擊與觸摸屏幕

當(dāng)用戶(hù)使用計(jì)算機(jī)上網(wǎng)時(shí)，利用鼠標(biāo)對(duì)界面進(jìn)行操作：?jiǎn)螕?，雙擊，右鍵，滾輪。用戶(hù)操作的熱區(qū)（可點(diǎn)擊）通常在網(wǎng)頁(yè)的中上部。用鼠標(biāo)操作的精確性強(qiáng)，很小的按鈕也不會(huì)產(chǎn)生誤點(diǎn)。用戶(hù)在使用手機(jī)應(yīng)用時(shí)，通常是用拇指操作，只有三分之一的屏幕是真正容易觸及的，也就是拇指能夠到達(dá)的區(qū)域（單手操作的前提下）。為了獲得人機(jī)工程學(xué)上舒適的體驗(yàn)，設(shè)計(jì)師應(yīng)將主點(diǎn)擊目標(biāo)放置在方便拇指點(diǎn)擊的熱區(qū)中。所以這就是為什么工具欄和標(biāo)簽欄一般都放在屏幕的底邊，而在傳統(tǒng)的計(jì)算機(jī)界面上，都習(xí)慣將菜單放在屏幕或窗口的頂部。但是由于我們有限的拇指熱區(qū)，主點(diǎn)擊目標(biāo)落到了手機(jī)屏幕的底部。該如何組織好點(diǎn)擊目標(biāo)的視覺(jué)層次是設(shè)計(jì)師要考慮的因素。常用的按鈕還有導(dǎo)航可以放在屏幕的左邊，不常用的按鈕還有會(huì)改變數(shù)據(jù)的點(diǎn)擊目標(biāo)可以安全地塞到右上方去。例如“刪除”、排列列表項(xiàng)目的“編輯”按鈕一般都是放在右上角，這樣就能減少誤點(diǎn)。

（3）物理隱喻

用戶(hù)在使用智能手機(jī)的觸屏?xí)r會(huì)發(fā)現(xiàn)其顯而易見(jiàn)的物理隱喻：滑動(dòng)屏幕、點(diǎn)擊按鈕、輕撫數(shù)字輪盤(pán)、拖曳地圖、拇指食指隨意放大縮小圖片。用戶(hù)可以輕松地操作這些交互，因?yàn)樗鼈兒驼鎸?shí)世界中的物體運(yùn)作一模一樣。這得益于手機(jī)自帶的傳感設(shè)備：重力感應(yīng)器、加速度傳感器、方向感應(yīng)器、方位傳感器、三軸陀螺儀、距離傳感器、光線(xiàn)傳感器、氣壓和溫度傳感器、紫外線(xiàn)傳感器等。設(shè)計(jì)師可以利用這些物理特性創(chuàng)造出更有趣的交互體驗(yàn)。而這些是傳統(tǒng)計(jì)算機(jī)屏幕無(wú)法擁有的感應(yīng)系統(tǒng)。

（4）手機(jī)應(yīng)用的優(yōu)勢(shì)

網(wǎng)站的附屬應(yīng)用相較于傳統(tǒng)網(wǎng)站有以下幾個(gè)優(yōu)勢(shì)：①高效—移動(dòng)場(chǎng)景中，最重要的用戶(hù)需求之一是使用高效。優(yōu)秀的網(wǎng)站會(huì)重新設(shè)計(jì)應(yīng)用來(lái)提升站點(diǎn)相應(yīng)部分的體驗(yàn)。淘寶綜合類(lèi)電商網(wǎng)站，設(shè)計(jì)出了具有特色的手機(jī)平臺(tái)的應(yīng)用，相較于使用Safari瀏覽器直接打開(kāi)的淘寶網(wǎng)站，淘寶的應(yīng)用界面更為簡(jiǎn)潔，用一個(gè)個(gè)圖標(biāo)代表淘寶網(wǎng)首頁(yè)最主要的功能，將次要的功能信息隱藏或省略，便于手機(jī)用戶(hù)查找使用。②更為生動(dòng)優(yōu)美的交互動(dòng)態(tài)效果—基于智能手機(jī)平臺(tái)的網(wǎng)站應(yīng)用，可以利用手機(jī)提供的富有動(dòng)感的控件更為生動(dòng)地展示內(nèi)容。雖通過(guò)Web技術(shù)可以模擬出接近的效果但無(wú)法模擬出手機(jī)逼真的物理動(dòng)態(tài)效果。③暫存功能—部分的手機(jī)應(yīng)用較于對(duì)應(yīng)的站點(diǎn)的一個(gè)優(yōu)勢(shì)在于應(yīng)用可以預(yù)存內(nèi)容，以備離線(xiàn)閱讀。例如，互動(dòng)分享和個(gè)性化定制的閱讀類(lèi)的應(yīng)用zaker就提供在線(xiàn)狀態(tài)時(shí)下載所有最新的資訊、微博、博客、報(bào)紙、雜志、圖片、rss、googlereader等眾多內(nèi)容并按照用戶(hù)個(gè)人意愿選擇版面區(qū)塊的內(nèi)容組成，離線(xiàn)后下載的文章可以在網(wǎng)絡(luò)盲區(qū)中閱讀。

2.界面設(shè)計(jì)的區(qū)別

（1）界面布局的不同

傳統(tǒng)的網(wǎng)絡(luò)平臺(tái)是以計(jì)算機(jī)為傳播媒介，網(wǎng)頁(yè)的尺寸受屏幕顯示的大小的制約，常見(jiàn)的尺寸為1000像素（屏寬）×768像素（屏長(zhǎng)），網(wǎng)頁(yè)的屏長(zhǎng)根據(jù)內(nèi)容及功能決定，常見(jiàn)的有兩屏三屏等。手機(jī)應(yīng)用設(shè)計(jì)的界面尺寸和手機(jī)顯示屏的尺寸息息相關(guān)，比如iphone3G尺寸為320×480像素，iphone4尺寸為960×640像素。從上述比較看出，網(wǎng)頁(yè)的尺寸要遠(yuǎn)大于手機(jī)應(yīng)用的尺寸，蝸居在巴掌大的屏幕里，每一塊地方都是“寸土寸金”。網(wǎng)頁(yè)設(shè)計(jì)的界面布局主要由廣告區(qū)、導(dǎo)航區(qū)、頁(yè)面內(nèi)容區(qū)這幾部分構(gòu)成。導(dǎo)航區(qū)通常分布于界面的頂部或左側(cè)，這樣的安排是要保證在第一屏?xí)r能夠完整地看到導(dǎo)航的每個(gè)分欄。廣告區(qū)通常位于導(dǎo)航區(qū)附近，占領(lǐng)頁(yè)面的核心陣地。網(wǎng)頁(yè)的界面布局總體上分為：“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型等。選擇什么樣的布局要根據(jù)頁(yè)面需要包含的內(nèi)容和功能進(jìn)行合理設(shè)計(jì)。手機(jī)應(yīng)用的界面布局和網(wǎng)站既有區(qū)別又有聯(lián)系。在界面布局上基于手機(jī)屏幕的特性要將重要的信息放在頂部，將重要的操作放在底部。常見(jiàn)的手機(jī)應(yīng)用布局是標(biāo)簽欄布局，分為上、中、下三部分，通常將標(biāo)簽欄和工具欄放在屏幕底部，導(dǎo)航欄置于屏幕頂端，中間部分是內(nèi)容區(qū)域。手機(jī)應(yīng)用在設(shè)計(jì)時(shí)應(yīng)盡量讓頁(yè)面一屏顯示完，避免滾動(dòng)條。減少屏幕上的元素，將高級(jí)工具和操作隱藏起來(lái)。平鋪?lái)?yè)面：這種布局常用于頁(yè)面為一個(gè)層級(jí)，滑動(dòng)屏幕可以切換頁(yè)面。頁(yè)面底部的一排小點(diǎn)是頁(yè)面的分頁(yè)控件圖標(biāo)，小點(diǎn)的數(shù)量代表了頁(yè)面的數(shù)量，高亮的小點(diǎn)代表了當(dāng)前頁(yè)面所處的位置，可以根據(jù)需要隨意翻動(dòng)。這種頁(yè)面的布局方式一般所含頁(yè)面數(shù)量小于10頁(yè)。樹(shù)形結(jié)構(gòu)/列表布局：這種布局常用于頁(yè)面層級(jí)較多，點(diǎn)擊單個(gè)列表欄可以展開(kāi)頁(yè)面或者進(jìn)入下一級(jí)頁(yè)面。也可以很容易地回到上一級(jí)頁(yè)面。這些布局方式可根據(jù)信息的具體情況組合使用，達(dá)到高效良好的用戶(hù)體驗(yàn)。

（2）文本信息的處理

Web上的文字段落又稱(chēng)“文本”。文本是Web上最主要的信息傳達(dá)形式，但是文本太多，大段的文本比如復(fù)雜無(wú)意義的說(shuō)明性文字、冗長(zhǎng)的鏈接只能減慢用戶(hù)的瀏覽速度。①要避免大段的散文；②對(duì)于段落形文字使用標(biāo)題、短語(yǔ)和項(xiàng)目符號(hào)。在Web布局中，文本段落一般用于劃分好的頁(yè)面內(nèi)容區(qū)域內(nèi)。在其手機(jī)附屬應(yīng)用中有幾種承載文本的區(qū)塊：①標(biāo)簽欄用于顯示很短的文本；②文本視圖：用于顯示文本字段；③文字輸入框：文本的可輸入?yún)^(qū)域。

（3）按鈕及輔助圖標(biāo)

網(wǎng)頁(yè)中，在導(dǎo)航欄，可輸入表單，搜索及其他面板中都含有按鈕。按鈕提示用戶(hù)點(diǎn)擊并完成某項(xiàng)功能。按鈕一般是由圖形（背景色塊）和文字組成，通常有兩種狀態(tài)：下載預(yù)覽狀態(tài)（鼠標(biāo)沒(méi)有點(diǎn)擊時(shí)）；鼠標(biāo)經(jīng)過(guò)或按下?tīng)顟B(tài)。其手機(jī)應(yīng)用的界面按鈕是手機(jī)界面中最基本的樣式—圓角矩形按鈕，按鈕包含文字或圖形。如圖導(dǎo)航區(qū)左側(cè)的按鈕上添加了照相機(jī)的輔助圖標(biāo)，簡(jiǎn)潔清晰，藍(lán)色的立體感按鈕同導(dǎo)航欄既有對(duì)比又很統(tǒng)一。右側(cè)是刪除按鈕，用紅色做出功能的強(qiáng)調(diào)和暗示。手機(jī)應(yīng)用中按鈕常見(jiàn)有以下幾種狀態(tài)：①在預(yù)載狀態(tài)下，即沒(méi)有觸碰的原始狀態(tài)。②按下時(shí)狀態(tài)，通常做高亮顯示狀態(tài)。③點(diǎn)擊觸摸后狀態(tài)，點(diǎn)擊觸摸后的反饋對(duì)手機(jī)應(yīng)用設(shè)計(jì)至關(guān)重要，它提示用戶(hù)當(dāng)前的操作狀態(tài)。我們可以通過(guò)改變背景顏色、更換圖標(biāo)圖片或更改文字顏色來(lái)進(jìn)行提示。網(wǎng)站中也有功能性的輔助圖標(biāo)，例如播放器中的指示各種功能的播放圖標(biāo)，具有翻頁(yè)功能的向前向后的箭頭等。手機(jī)應(yīng)用的圖標(biāo)系統(tǒng)更為豐富，功能也更為強(qiáng)大。手機(jī)應(yīng)用的圖標(biāo)一類(lèi)是給標(biāo)簽欄用的，一類(lèi)是給導(dǎo)航欄和工具欄用的。

（4）導(dǎo)航的設(shè)計(jì)

在傳統(tǒng)Web頁(yè)面中，導(dǎo)航是網(wǎng)站的“中樞”，就像書(shū)籍中的目錄頁(yè)面一樣，通過(guò)導(dǎo)航能夠了解整個(gè)網(wǎng)站的信息架構(gòu)分類(lèi)，幫助用戶(hù)明確定位。導(dǎo)航設(shè)計(jì)建立在對(duì)于用戶(hù)需求和技術(shù)可能性的基礎(chǔ)上，融交互、界面及圖形設(shè)計(jì)于一體。由于網(wǎng)站有內(nèi)容的先導(dǎo)性，使用戶(hù)能夠引導(dǎo)自己找到需要的信息，高效的導(dǎo)航系統(tǒng)常常是首次訪問(wèn)網(wǎng)站的用戶(hù)的第一需求。網(wǎng)站的導(dǎo)航主要分為主導(dǎo)航、輔助導(dǎo)航、本地導(dǎo)航和上下文導(dǎo)航。分級(jí)式結(jié)構(gòu)是網(wǎng)絡(luò)中對(duì)信息的典型組織方法。一個(gè)多級(jí)的網(wǎng)站界面將對(duì)用戶(hù)能否順利找到他們需要的信息產(chǎn)生重要的影響。通過(guò)直接進(jìn)入首頁(yè)相比，更多的人是通過(guò)搜索、E-mail或廣告鏈接到達(dá)某個(gè)頁(yè)面的。這其中一個(gè)十分重要的因素是，導(dǎo)航系統(tǒng)應(yīng)當(dāng)顯示頁(yè)面信息所處的范圍和環(huán)境，以幫助人們衡量和確定其關(guān)聯(lián)性。

3.設(shè)計(jì)思維的聯(lián)系

對(duì)使用者的研究可以預(yù)計(jì)具體的使用過(guò)程，了解用戶(hù)的操作行為，這里的用戶(hù)群體受到年齡、性別、職業(yè)、上網(wǎng)方式及電腦和網(wǎng)絡(luò)技術(shù)水平的限制—研究實(shí)際使用用戶(hù)群。例如，給老年人用戶(hù)群服務(wù)的網(wǎng)站文字是否考慮要大些（網(wǎng)絡(luò)常用正文為宋體5號(hào)字）距離是否需要調(diào)整，是否需要增設(shè)只針對(duì)老年用戶(hù)使用的功能等。在手機(jī)應(yīng)用的設(shè)計(jì)中也要對(duì)客戶(hù)及用戶(hù)進(jìn)行細(xì)致的分析，并且根據(jù)用戶(hù)反饋情況定期修改應(yīng)用中的不足。結(jié)語(yǔ)在探討了網(wǎng)頁(yè)設(shè)計(jì)及其附屬應(yīng)用設(shè)計(jì)的區(qū)別和聯(lián)系后，我們?cè)谠O(shè)計(jì)一款手機(jī)附屬應(yīng)用時(shí)要進(jìn)行詳細(xì)的用戶(hù)及客戶(hù)分析，并深入地調(diào)查研究原網(wǎng)站的布局特點(diǎn)及功能和服務(wù)，從中找到手機(jī)附屬應(yīng)用能夠加以借鑒和發(fā)揮的地方。在此基礎(chǔ)上，根據(jù)手機(jī)應(yīng)用布局、導(dǎo)航、按鈕、文本等元素的不同特點(diǎn)，將信息進(jìn)行合理的排序與可視化設(shè)計(jì)。運(yùn)用隱喻的設(shè)計(jì)思維使設(shè)計(jì)更貼近生活，最大限度地減少使用障礙，使用戶(hù)得到良好的產(chǎn)品體驗(yàn)。并在一次次的用戶(hù)反饋中總結(jié)和修改應(yīng)用，逐漸完善設(shè)計(jì)。（本文作者：張璇 單位：魯迅美術(shù)學(xué)院）