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

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

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

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

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

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

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

當(dāng)用戶使用計(jì)算機(jī)上網(wǎng)時(shí)，利用鼠標(biāo)對界面進(jìn)行操作：單擊，雙擊，右鍵，滾輪。用戶操作的熱區(qū)（可點(diǎn)擊）通常在網(wǎng)頁的中上部。用鼠標(biāo)操作的精確性強(qiáng)，很小的按鈕也不會產(chǎn)生誤點(diǎn)。用戶在使用手機(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)的視覺層次是設(shè)計(jì)師要考慮的因素。常用的按鈕還有導(dǎo)航可以放在屏幕的左邊，不常用的按鈕還有會改變數(shù)據(jù)的點(diǎn)擊目標(biāo)可以安全地塞到右上方去。例如“刪除”、排列列表項(xiàng)目的“編輯”按鈕一般都是放在右上角，這樣就能減少誤點(diǎn)。

（3）物理隱喻

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

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

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

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

（1）界面布局的不同

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

（2）文本信息的處理

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

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

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

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

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

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

對使用者的研究可以預(yù)計(jì)具體的使用過程，了解用戶的操作行為，這里的用戶群體受到年齡、性別、職業(yè)、上網(wǎng)方式及電腦和網(wǎng)絡(luò)技術(shù)水平的限制—研究實(shí)際使用用戶群。例如，給老年人用戶群服務(wù)的網(wǎng)站文字是否考慮要大些（網(wǎng)絡(luò)常用正文為宋體5號字）距離是否需要調(diào)整，是否需要增設(shè)只針對老年用戶使用的功能等。在手機(jī)應(yīng)用的設(shè)計(jì)中也要對客戶及用戶進(jìn)行細(xì)致的分析，并且根據(jù)用戶反饋情況定期修改應(yīng)用中的不足。結(jié)語在探討了網(wǎng)頁設(shè)計(jì)及其附屬應(yīng)用設(shè)計(jì)的區(qū)別和聯(lián)系后，我們在設(shè)計(jì)一款手機(jī)附屬應(yīng)用時(shí)要進(jìn)行詳細(xì)的用戶及客戶分析，并深入地調(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ì)更貼近生活，最大限度地減少使用障礙，使用戶得到良好的產(chǎn)品體驗(yàn)。并在一次次的用戶反饋中總結(jié)和修改應(yīng)用，逐漸完善設(shè)計(jì)。（本文作者：張璇 單位：魯迅美術(shù)學(xué)院）