網站設計與手機應用設計的區別論文
與其他領域的設計師相比，網頁設計師需要與掌握這些技術的人充分合作。手機應用設計作為第三方智慧手機應用程式的圖形使用者介面設計和互動設計，以移動網際網路為平臺，逐漸把使用者帶入一個習慣使手機客戶端上網的時期。在應用設計中美需要由功能來傳遞，每個介面元素都必須專注於當下使用者所需。目前，各種手機應用層出不窮，其數目可稱之為鋪天蓋地。在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號字）距離是否需要調整，是否需要增設只針對老年使用者使用的功能等。在手機應用的設計中也要對客戶及使用者進行細緻的分析，並且根據使用者反饋情況定期修改應用中的不足。結語在探討了網頁設計及其附屬應用設計的區別和聯絡後，我們在設計一款手機附屬應用時要進行詳細的使用者及客戶分析，並深入地調查研究原網站的佈局特點及功能和服務，從中找到手機附屬應用能夠加以借鑑和發揮的地方。在此基礎上，根據手機應用佈局、導航、按鈕、文字等元素的不同特點，將資訊進行合理的排序與視覺化設計。運用隱喻的設計思維使設計更貼近生活，最大限度地減少使用障礙，使使用者得到良好的產品體驗。並在一次次的使用者反饋中總結和修改應用，逐漸完善設計。
