web UI 和移動UI的區別以及聯繫？

01-16

總體來說，webUI和移動端UI的設計應該注意以下幾點，也可以說是用戶體驗上要注意的幾點吧：

1，使用場景的差異。web頁面的用戶多半是坐在電腦前，固定的看著屏幕和使用滑鼠操作，用戶場景簡單而固定，而移動端用戶是使用碎片化時間，在複雜的場景當中，或是在擁擠的地鐵中需要單手操作，或是在強烈的陽光下，或是在床上睡覺前。。。不同的情況要考慮不同的用戶體驗，所以要注意它的顏色設計，字體大小的控制，單手操作時按鈕的大小以及擺放位，還要注意防止觸擊點過多而誤操作，所以使用手勢滑動操作勝過點擊按鈕操作。

2，屏幕尺寸的大小差異。web頁面已經是處於寬屏大屏的時代了，所有以充足的區域來展現信息，整個界面的利用率很高，在不影響整體頁面時次要信息也可以展現在頁面當中。但在移動端中，在寸金寸土的屏幕當中，容不下無用信息的佔有，所以每個頁面的主要信息就需要有一個合理的規劃和安排。用戶使用移動端應用非常注重效率，移動端的產品設計難度就相對增加。

3，平台的設計規範和操作習慣的差異。web頁面的操作，依然是大屏幕，滑鼠操作，相對來說操作簡單明了。移動端設備較多，平台目前主流有ios、android、windows phone，設計有擬物化扁平化等風格，不同的平台有著不同的設計規範，操作習慣也略有差異，android的返回按鈕邏輯和ios的有所不同，windows phone的操作手勢也有所不同，但是無論怎樣都是基於人機交互的的原理，探索著更適合更方便人類操作的習慣和本質。所以在ui設計當中應該要考慮到這些因素。

粗略的總結也以上三點，也希望有經驗者能夠繼續補充，在設計這條道路上，希望跟大家多交流，每天進步一點點。

1、展示解析度不同，手機和移動設備的屏幕最大也是800*600，而電腦已經進入寬屏化境界，淘寶、京東已經進入1000px寬度的境界了。

2、對於前台技術也不同，比如移動開發現在越來越要求脫離FLASH（IOS根本不支持SWF）。

3、系統支持不同，對於WEB開發，國內的高端CMS（如逐浪CMS、風訊CMS）可以直接支持，有廣大的廠商支持，而移動UI則很多時候是以APP應用客戶端體現。

4、操作方法不同，PC的WEB UI往往是用滑鼠、鍵盤，而移動UI大多為觸控。

一、用戶與界面交互/操作的方式不同
Web網站：以滑鼠或觸摸板為媒介，多採用左鍵點擊的操作，也支持滑鼠滑過、滑鼠右鍵的操作方式。
移動App：直接用手指觸控屏幕，除了最通用的點擊操作之外，還支持滑動、捏合等各種複雜的手勢。

設計要點：
1、相比滑鼠，手指觸摸範圍更大，較難精確控制點擊位置，對此iOS人機交互規範中提到手指最合適的觸控區域至少需要44 point。所以移動App的點擊區域要設置的更大一些，不同點擊元素的間隔也不能太近。
2、Web網站支持滑鼠滑過的效果，一些tips提示通常採用滑鼠滑過展開/收起的交互方式。在移動App則不支持這類效果，通暢需要點擊特定的icon來收起/展開提示。
3、移動App支持的豐富的手勢操作，比如通過左滑可看到你可能需要的快捷操作「取消關注」、「刪除」，這類操作方式的特點是快捷高效，但對於初學者來說有一定的學習、獲知成本。我們在合理設計這些快捷操作方式的同時，還需要支持最通用的點擊方式來完成任務的操作路徑。針對手勢操作學習成本高的問題，一些App常通過新手引導的方式來教用戶。
4、移動App以單手操作為主，界面上重要元素需要在用戶單手點擊範圍內，或者提供快捷的手勢操作。

二、設備尺寸不同
Web網站：不同PC的解析度不同，瀏覽器窗口最大化的尺寸也不同；瀏覽器窗口可縮放。
移動App：設備尺寸相對較小；不同設備的解析度差異化較多，特別是Android；支持橫屏、豎屏調轉方向。

設計要點：
1、移動App的尺寸較小，一屏展示的內容有限，更需要明確哪些信息更為重要，有效的「組織」相關聯的內容，優先順序高的內容突出展示、次要內容適當「隱藏」。
2、Web網站因瀏覽器解析度差異較大、且窗口尺寸可變化，設計時需要確定好不同解析度的內容展示和布局，也因為這一點加上webapp的瀏覽需求，近幾年來響應式設計更為普遍。
3、因設備解析度、dpi大小不一，所以移動App在界面布局、圖片、文字的顯示上，要兼顧不同設備的效果，需要設計師與開發共同配合做好適配工作。
4、因移動設備支持橫屏、豎屏展示，所以在設計移動App（比如遊戲、視頻播放界面）時，需要考慮用戶是否有「換個方向看看」的需求、哪些情況下切換屏幕方向、如何切換等。

三、使用環境不同
Web網站：通常坐在某個室內、使用時間相對較長；
移動App：既可能是長時間在室內使用、也可能是利用碎片化的時間使用，或站或坐或躺著或行走，姿勢不一；

設計要點：
1、使用Web網站時，用戶更為專註；
2、使用移動App時，用戶很容易被周邊環境所影響，對界面上展示的內容可能沒那麼容易留意到；長時間使用時更適合沉寂式瀏覽，碎片化時間使用時用戶可能沒有足夠的時間、每次瀏覽內容有限，類似「稍候閱讀」、「收藏」等功能則比較實用；用戶在移動過程中更容易誤操作，需要考慮如何防止誤操作、如何從錯誤中恢復。

四、網路環境不同
Web網站：網路相對穩定且基本無需擔心流量問題
移動App：因用戶使用環境複雜，可能在移動過程中從通暢環境到封閉的信號較差的環境，網路可能從有到無、從快到慢；既可使用無需擔心流量的WiFi，也可能使用需要控制流量的3G/4G。

設計要點：
1、移動App，網路異常的情況更普遍，需要更加重視這類場景下的錯誤提示、以及如何從錯誤中恢復的方法。
2、移動App，在3G/4G情況下用戶對流量比較重視，對於需要耗費較多流量的操作，需要提醒用戶，在用戶允許的前提下才繼續進行。

五、通知方式不同
Web網站：對於瀏覽器的通知中心，用戶使用的不多，很難主動喚起用戶
移動App：推送通知給用戶的方式很常見。

設計要點：
在移動App可以用通知及時提醒用戶一些重要信息，但也需要考慮用戶關閉通知提醒的場景下用戶仍然能無礙的使用；因為「通知」功能對用戶較為重要，設計師需要思考如何讓用戶更容易「開啟通知許可權」。

六、基於位置服務的精細度不同
Web網站：定位功能一般獲取到的是當前城市
移動App：可較為精確的獲取用戶的當前位置

七、按鈕的狀態不同

移動App按鈕有三種狀態：1 正常（normal），表示控制項處於活動狀態，但是當前並未使用。2 禁用（disabled），表示按鈕未啟用且無法使用；3 已選中（selected），僅特定控制項具有該狀態，表示控制項當前已被選中。

Web網站有四種狀態：1 正常（normal），表示控制項處於活動狀態，但是當前並未使用。2 滑鼠覆蓋（hover），表示控制項正被按住或正被使用。 3 禁用（disabled），表示按鈕未啟用且無法使用； 4 已選中（selected），僅特定控制項具有該狀態，表示控制項當前已被選中。
設計要點：
移動App可合理的利用用戶的位置，給用戶提供一些服務。比如，地圖類可以搜索「我的位置」到目的地的路線，生活服務類可以查詢我的位置附近的美食、商場、電影院等等，這樣的方式省去了用戶手動輸入當前位置的複雜、更加智能化。

參考文獻：從交互設計看WEB網站和移動APP的六大差異

先佔坑在地鐵上。。

1.使用場景不同，移動端更加碎片化多樣化，比如床上，戶外陽光下，這就要求在界面設計上給用戶明顯的反饋

2.使用習慣，移動端多為單線程操作，用戶的使用路徑是直線的，這就要求UI的識別度高，能給用戶明顯的引導，我在哪能去哪能退到哪。相比移動端，用戶在PC上的操作也是複雜的多線程，需要給用戶更多可能性，同時架構清晰內容間需要通過設計串聯

區別：

1.精確度不同；

2. 位置不同；

3. 操作習慣不同；

4. 按鈕狀態不同。

聯繫：應該說ui設計的共同點，要單獨說網頁設計與手機設計的聯繫暫時還沒有特別獨特的觀點和角度，希望經驗者補充。

區別還是不小。總的來說，由平台系統、用戶使用場景、屏幕解析度、操作方式的不同而不同。例如icon形式的應用入口；碎片時間使用手機，界面必需更直觀高效；手機端的各種手勢操作，無滑鼠經過懸停等交互；