網站設計與手機應用設計的區別

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

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

1.用戶體驗的不同

（1）媒介的特性區別

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

（2）鼠標點擊與觸摸屏幕

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

（3）物理隱喻

用戶在使用智能手機的觸屏時會發現其顯而易見的物理隱喻：滑動屏幕、點擊按鈕、輕撫數字輪盤、拖曳地圖、拇指食指隨意放大縮小圖片。用戶可以輕松地操作這些交互，因為它們和真實世界中的物體運作一模一樣。這得益于手機自帶的傳感設備：重力感應器、加速度傳感器、方向感應器、方位傳感器、三軸陀螺儀、距離傳感器、光線傳感器、氣壓和溫度傳感器、紫外線傳感器等。設計師可以利用這些物理特性創造出更有趣的交互體驗。而這些是傳統計算機屏幕無法擁有的感應系統。

（4）手機應用的優勢

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

2.界面設計的區別

（1）界面布局的不同

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

（2）文本信息的處理

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

（3）按鈕及輔助圖標

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

（4）導航的設計

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

3.設計思維的聯系

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