網(wǎng)站設計與手機應用設計的區別論文
與其他領(lǐng)域的設計師相比，網(wǎng)頁(yè)設計師需要與掌握這些技術(shù)的人充分合作。手機應用設計作為第三方智能手機應用程序的圖形用戶(hù)界面設計和交互設計，以移動(dòng)互聯(lián)網(wǎng)為平臺，逐漸把用戶(hù)帶入一個(gè)習慣使手機客戶(hù)端上網(wǎng)的時(shí)期。在應用設計中美需要由功能來(lái)傳遞，每個(gè)界面元素都必須專(zhuān)注于當下用戶(hù)所需。目前，各種手機應用層出不窮，其數目可稱(chēng)之為鋪天蓋地。在appstore或是其他平臺上，手機應用被大致分為幾大類(lèi)：系統工具、影音娛樂(lè )、網(wǎng)頁(yè)瀏覽、辦公閱讀、社交通信、生活百科、購物、游戲等。網(wǎng)站設計與手機應用設計的區別：
1.用戶(hù)體驗的不同
�。�1）媒介的特性區別
傳統的網(wǎng)站都是通過(guò)計算機終端瀏覽，而手機應用則是通過(guò)智能手機終端平臺使用和操作。操作的媒介具有不同的特性及用戶(hù)使用狀態(tài)。相比較而言，手機更靈活，可以隨身攜帶，用戶(hù)在行走中就可以完成操作，也就是說(shuō)人們只用一只手操作應用，只用一部分注意力在你精雕細琢的界面上，也正因為如此，這與作為設計師的你看到的應用完全不同。
�。�2）鼠標點(diǎn)擊與觸摸屏幕
當用戶(hù)使用計算機上網(wǎng)時(shí)，利用鼠標對界面進(jìn)行操作：?jiǎn)螕�，雙擊，右鍵，滾輪。用戶(hù)操作的熱區（可點(diǎn)擊）通常在網(wǎng)頁(yè)的中上部。用鼠標操作的精確性強，很小的按鈕也不會(huì )產(chǎn)生誤點(diǎn)。用戶(hù)在使用手機應用時(shí)，通常是用拇指操作，只有三分之一的屏幕是真正容易觸及的，也就是拇指能夠到達的區域（單手操作的前提下）。為了獲得人機工程學(xué)上舒適的體驗，設計師應將主點(diǎn)擊目標放置在方便拇指點(diǎn)擊的熱區中。所以這就是為什么工具欄和標簽欄一般都放在屏幕的底邊，而在傳統的計算機界面上，都習慣將菜單放在屏幕或窗口的頂部。但是由于我們有限的拇指熱區，主點(diǎn)擊目標落到了手機屏幕的底部。該如何組織好點(diǎn)擊目標的視覺(jué)層次是設計師要考慮的因素。常用的按鈕還有導航可以放在屏幕的左邊，不常用的按鈕還有會(huì )改變數據的點(diǎn)擊目標可以安全地塞到右上方去。例如“刪除”、排列列表項目的“編輯”按鈕一般都是放在右上角，這樣就能減少誤點(diǎn)。
�。�3）物理隱喻
用戶(hù)在使用智能手機的觸屏時(shí)會(huì )發(fā)現其顯而易見(jiàn)的物理隱喻：滑動(dòng)屏幕、點(diǎn)擊按鈕、輕撫數字輪盤(pán)、拖曳地圖、拇指食指隨意放大縮小圖片。用戶(hù)可以輕松地操作這些交互，因為它們和真實(shí)世界中的物體運作一模一樣。這得益于手機自帶的傳感設備：重力感應器、加速度傳感器、方向感應器、方位傳感器、三軸陀螺儀、距離傳感器、光線(xiàn)傳感器、氣壓和溫度傳感器、紫外線(xiàn)傳感器等。設計師可以利用這些物理特性創(chuàng )造出更有趣的交互體驗。而這些是傳統計算機屏幕無(wú)法擁有的感應系統。
�。�4）手機應用的優(yōu)勢
網(wǎng)站的附屬應用相較于傳統網(wǎng)站有以下幾個(gè)優(yōu)勢：
�、俑咝А苿�(dòng)場(chǎng)景中，最重要的用戶(hù)需求之一是使用高效。優(yōu)秀的網(wǎng)站會(huì )重新設計應用來(lái)提升站點(diǎn)相應部分的體驗。淘寶綜合類(lèi)電商網(wǎng)站，設計出了具有特色的手機平臺的應用，相較于使用Safari瀏覽器直接打開(kāi)的淘寶網(wǎng)站，淘寶的應用界面更為簡(jiǎn)潔，用一個(gè)個(gè)圖標代表淘寶網(wǎng)首頁(yè)最主要的功能，將次要的功能信息隱藏或省略，便于手機用戶(hù)查找使用。
�、诟鼮樯鷦�(dòng)優(yōu)美的交互動(dòng)態(tài)效果—基于智能手機平臺的網(wǎng)站應用，可以利用手機提供的富有動(dòng)感的控件更為生動(dòng)地展示內容。雖通過(guò)Web技術(shù)可以模擬出接近的效果但無(wú)法模擬出手機逼真的物理動(dòng)態(tài)效果。
�、蹠捍婀δ堋糠值氖謾C應用較于對應的站點(diǎn)的一個(gè)優(yōu)勢在于應用可以預存內容，以備離線(xiàn)閱讀。例如，互動(dòng)分享和個(gè)性化定制的閱讀類(lèi)的應用zaker就提供在線(xiàn)狀態(tài)時(shí)下載所有最新的資訊、微博、博客、報紙、雜志、圖片、rss、googlereader等眾多內容并按照用戶(hù)個(gè)人意愿選擇版面區塊的內容組成，離線(xiàn)后下載的文章可以在網(wǎng)絡(luò )盲區中閱讀。
2.界面設計的區別
�。�1）界面布局的不同
傳統的網(wǎng)絡(luò )平臺是以計算機為傳播媒介，網(wǎng)頁(yè)的尺寸受屏幕顯示的大小的`制約，常見(jiàn)的尺寸為1000像素（屏寬）×768像素（屏長(cháng)），網(wǎng)頁(yè)的屏長(cháng)根據內容及功能決定，常見(jiàn)的有兩屏三屏等。手機應用設計的界面尺寸和手機顯示屏的尺寸息息相關(guān)，比如iphone3G尺寸為320×480像素，iphone4尺寸為960×640像素。從上述比較看出，網(wǎng)頁(yè)的尺寸要遠大于手機應用的尺寸，蝸居在巴掌大的屏幕里，每一塊地方都是“寸土寸金”。網(wǎng)頁(yè)設計的界面布局主要由廣告區、導航區、頁(yè)面內容區這幾部分構成。導航區通常分布于界面的頂部或左側，這樣的安排是要保證在第一屏時(shí)能夠完整地看到導航的每個(gè)分欄。廣告區通常位于導航區附近，占領(lǐng)頁(yè)面的核心陣地。網(wǎng)頁(yè)的界面布局總體上分為：“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型等。選擇什么樣的布局要根據頁(yè)面需要包含的內容和功能進(jìn)行合理設計。手機應用的界面布局和網(wǎng)站既有區別又有聯(lián)系。在界面布局上基于手機屏幕的特性要將重要的信息放在頂部，將重要的操作放在底部。常見(jiàn)的手機應用布局是標簽欄布局，分為上、中、下三部分，通常將標簽欄和工具欄放在屏幕底部，導航欄置于屏幕頂端，中間部分是內容區域。手機應用在設計時(shí)應盡量讓頁(yè)面一屏顯示完，避免滾動(dòng)條。減少屏幕上的元素，將高級工具和操作隱藏起來(lái)。平鋪?lái)?yè)面：這種布局常用于頁(yè)面為一個(gè)層級，滑動(dòng)屏幕可以切換頁(yè)面。頁(yè)面底部的一排小點(diǎn)是頁(yè)面的分頁(yè)控件圖標，小點(diǎn)的數量代表了頁(yè)面的數量，高亮的小點(diǎn)代表了當前頁(yè)面所處的位置，可以根據需要隨意翻動(dòng)。這種頁(yè)面的布局方式一般所含頁(yè)面數量小于10頁(yè)。樹(shù)形結構/列表布局：這種布局常用于頁(yè)面層級較多，點(diǎn)擊單個(gè)列表欄可以展開(kāi)頁(yè)面或者進(jìn)入下一級頁(yè)面。也可以很容易地回到上一級頁(yè)面。這些布局方式可根據信息的具體情況組合使用，達到高效良好的用戶(hù)體驗。
�。�2）文本信息的處理
Web上的文字段落又稱(chēng)“文本”。文本是Web上最主要的信息傳達形式，但是文本太多，大段的文本比如復雜無(wú)意義的說(shuō)明性文字、冗長(cháng)的鏈接只能減慢用戶(hù)的瀏覽速度。①要避免大段的散文；②對于段落形文字使用標題、短語(yǔ)和項目符號。在Web布局中，文本段落一般用于劃分好的頁(yè)面內容區域內。
在其手機附屬應用中有幾種承載文本的區塊：①標簽欄用于顯示很短的文本；②文本視圖：用于顯示文本字段；③文字輸入框：文本的可輸入區域。
�。�3）按鈕及輔助圖標
網(wǎng)頁(yè)中，在導航欄，可輸入表單，搜索及其他面板中都含有按鈕。按鈕提示用戶(hù)點(diǎn)擊并完成某項功能。按鈕一般是由圖形（背景色塊）和文字組成，通常有兩種狀態(tài)：下載預覽狀態(tài)（鼠標沒(méi)有點(diǎn)擊時(shí)）；鼠標經(jīng)過(guò)或按下?tīng)顟B(tài)。其手機應用的界面按鈕是手機界面中最基本的樣式—圓角矩形按鈕，按鈕包含文字或圖形。如圖導航區左側的按鈕上添加了照相機的輔助圖標，簡(jiǎn)潔清晰，藍色的立體感按鈕同導航欄既有對比又很統一。右側是刪除按鈕，用紅色做出功能的強調和暗示。手機應用中按鈕常見(jiàn)有以下幾種狀態(tài)：①在預載狀態(tài)下，即沒(méi)有觸碰的原始狀態(tài)。②按下時(shí)狀態(tài)，通常做高亮顯示狀態(tài)。③點(diǎn)擊觸摸后狀態(tài)，點(diǎn)擊觸摸后的反饋對手機應用設計至關(guān)重要，它提示用戶(hù)當前的操作狀態(tài)。我們可以通過(guò)改變背景顏色、更換圖標圖片或更改文字顏色來(lái)進(jìn)行提示。網(wǎng)站中也有功能性的輔助圖標，例如播放器中的指示各種功能的播放圖標，具有翻頁(yè)功能的向前向后的箭頭等。手機應用的圖標系統更為豐富，功能也更為強大。手機應用的圖標一類(lèi)是給標簽欄用的，一類(lèi)是給導航欄和工具欄用的。
�。�4）導航的設計
在傳統Web頁(yè)面中，導航是網(wǎng)站的“中樞”，就像書(shū)籍中的目錄頁(yè)面一樣，通過(guò)導航能夠了解整個(gè)網(wǎng)站的信息架構分類(lèi)，幫助用戶(hù)明確定位。導航設計建立在對于用戶(hù)需求和技術(shù)可能性的基礎上，融交互、界面及圖形設計于一體。由于網(wǎng)站有內容的先導性，使用戶(hù)能夠引導自己找到需要的信息，高效的導航系統常常是首次訪(fǎng)問(wèn)網(wǎng)站的用戶(hù)的第一需求。網(wǎng)站的導航主要分為主導航、輔助導航、本地導航和上下文導航。分級式結構是網(wǎng)絡(luò )中對信息的典型組織方法。一個(gè)多級的網(wǎng)站界面將對用戶(hù)能否順利找到他們需要的信息產(chǎn)生重要的影響。通過(guò)直接進(jìn)入首頁(yè)相比，更多的人是通過(guò)搜索、E-mail或廣告鏈接到達某個(gè)頁(yè)面的。這其中一個(gè)十分重要的因素是，導航系統應當顯示頁(yè)面信息所處的范圍和環(huán)境，以幫助人們衡量和確定其關(guān)聯(lián)性。
3.設計思維的聯(lián)系
對使用者的研究可以預計具體的使用過(guò)程，了解用戶(hù)的操作行為，這里的用戶(hù)群體受到年齡、性別、職業(yè)、上網(wǎng)方式及電腦和網(wǎng)絡(luò )技術(shù)水平的限制—研究實(shí)際使用用戶(hù)群。例如，給老年人用戶(hù)群服務(wù)的網(wǎng)站文字是否考慮要大些（網(wǎng)絡(luò )常用正文為宋體5號字）距離是否需要調整，是否需要增設只針對老年用戶(hù)使用的功能等。在手機應用的設計中也要對客戶(hù)及用戶(hù)進(jìn)行細致的分析，并且根據用戶(hù)反饋情況定期修改應用中的不足。結語(yǔ)在探討了網(wǎng)頁(yè)設計及其附屬應用設計的區別和聯(lián)系后，我們在設計一款手機附屬應用時(shí)要進(jìn)行詳細的用戶(hù)及客戶(hù)分析，并深入地調查研究原網(wǎng)站的布局特點(diǎn)及功能和服務(wù)，從中找到手機附屬應用能夠加以借鑒和發(fā)揮的地方。在此基礎上，根據手機應用布局、導航、按鈕、文本等元素的不同特點(diǎn)，將信息進(jìn)行合理的排序與可視化設計。運用隱喻的設計思維使設計更貼近生活，最大限度地減少使用障礙，使用戶(hù)得到良好的產(chǎn)品體驗。并在一次次的用戶(hù)反饋中總結和修改應用，逐漸完善設計。
【網(wǎng)站設計與手機應用設計的區別論文】相關(guān)文章：
動(dòng)態(tài)網(wǎng)站設計的色彩應用論文04-21
交互動(dòng)畫(huà)式網(wǎng)站設計應用論文04-21
色彩搭配在網(wǎng)站設計的應用論文04-21
工業(yè)設計中仿生設計的應用論文04-21
仿生設計在園林設計中的應用論文04-21
字體設計在平面設計中的應用論文04-22