App與Web的設計區別（上）：使用場景與設計方法

從使用場景和設計方法來看，App與Web的設計有什么區別？

早前，總是遇到問“Web設計”和“UI設計”分別做了多久？之類的詢問，文章開始之前，我們先來聊聊什么是UI設計。

UI=Ueser Interface，直譯“用戶界面”。也就是說UI設計就是用戶界面設計。所以只要是用戶，也就是人機交互得體驗中會用到的界面,都叫做“UI”，對于這些“UI”的設計，我們都統稱為“UI設計”。

界面有很多種，我們主要介紹Web與App界面，由淺入深，通過使用場景與設計方法、開發環境與適配要點，兩兩結合來看一下他們的區別。

關于使用場景，2012年移動互聯網元年至今，越來越多的小伙伴將網癮道具，從電腦改為移動設備。以前聊的是，我配了個XXX的顯卡跑游戲，現在越來越多的是，某果的發布會看了嗎？

越來越多的用戶“道具”，促使我們要去畫更多的，用戶的“道具”皮膚，也就是我們“俗稱”的界面。

在設計不同的“皮膚”時，我們可通過考慮以下幾點設計方法，來區分他們。

1. 交互方式的不同

1.1 操作媒介

Web網站 – 鼠標操作 VS 移動App – 手指場景的局限造成了，使用電腦成本會高一些，相對按鈕位置的精確度會更高（在觸摸大屏還沒出現的時代，我們操作鼠標來實現點擊）。

而移動設備，隨時隨地動動手指就可以了。

我們要注意預留點擊區域，控制可點擊內容的艱巨性。

1.2 設計要點

（1）使用場景不同

• 相對PC端的位置固定，因為顯示器種類繁多，窗口也可以隨意縮放，設計時需要優先確定頁面的安全區域，但同樣因為屏幕大所有現實的內容相對更豐富。
• 而移動端的頁面相對就小很多，雖然小但顯得很靈活，很多App賣點就是利用碎片花時間學習、購物、娛樂，對應這點的不同，移動端的內容會更加精簡。

兩端的閱讀范圍及內容長度偏重的也因此不同。

（2）文字大小

Web設計 ：比較隨意，文章正文字體12px/14px；頁面安全區域1080px～1280px為宜（一些展示頁面字體會做到16-20px或更大）。

App設計：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體字數根據24px-36px的字體大小，以及頁邊距來定～）。

（3）Banner

• Web設計：寬度在1920px,主內容區域（安全范圍）1080px～1280px為宜；
• App設計：畫面大小根據比例自適應縮放或根據實際頁面適配方案調整安全距離。

2. 反饋方式的不同

相對PC端的位置固定，用戶會在一個相對平緩的環境瀏覽頁面，狀態也會更為專注。誤點擊的概率小，更多的會講究反饋速度和信息的精確度，用戶比較多的是收藏正頁面而不是單獨的段落。而移動端用戶因為場景多變，很多時候會利用走路，坐車的實際去瀏覽界面，更容易產生誤操作，也更容易對頁面內容產生疲憊感。

Web設計：一般對于界面的通知中心,位置相對固定，但較為隱蔽，用戶使用的不多,很難主動喚起用戶。

這里設計師需要做的，是將自動呼出的彈窗提示和漂浮窗口這類的“強制”、“粗魯”的提示形式。（經常被運營要求加個活動飄窗，價格在線客服，這類令人反感的交互方式。）

通過一些，相對“隱蔽”、“固定”、“委婉”的方式及擺放位置，在不影響用戶閱讀的前提下進行提示交互。

App設計：最常見的是系統自帶的推送通知，用戶可主動關閉通知，當然也有嵌在頁面內的，因為屏幕限制，所以相對網頁更加突出，設計師需要思考如何讓用戶更容易“開啟通知權限”。

3. 側重的不同

針對不同設備用戶的不同習慣，我們在定義兩端的交互內容時也要有所側重，我們會選擇性的對一些內容進行隱藏，也會針對設備區分同一功能的交互方式。比如：兩端同樣的收藏動作，Web用戶比較多的是收藏整頁，而不是單獨的段落；因此用戶會較多使用“收藏夾”、下載等方式。

而對App用戶因為切換應用容易被打斷操作及閱讀環境的限制，除了選擇一些App自帶的“稍候閱讀”功能外，“截屏”保存或長按收藏就比較實用了。

3.1 藏功能

平臺，會在兩端分別給用戶不同的功能側重。就好像工作時間會更優先pc端去處理事情，這是因為，PC端能夠更好的拆解我們的需求，因為需求不同界面的側重功能也會不同。

比如：我們會有在平臺編輯文章并配圖、排版發布平臺的需求，但是在兩端同時體驗操作后發現，App任務發布的復雜程度讓用戶難以理解。往往一個Web頁面就能完成的事情App端需要2-3個頁面才能完成，加上大段的文字內容需要編輯，以及網絡狀態原因，讓發布任務變得很艱難。

因此，很多App就會拆分兩端的用戶需求，將商家更多的引導去Web去上架貨物;消費者則側重于App，同時界面會根據不同端“藏”去一部分的功能。

3.2 藏內容

因界面分辨率的差異化，我們也會隱藏一些需求度較低的內容元素。比如：我們常說的面包條菜單，其實就是把Web上常規的Menu，適應智能手機的操作和顯示特性而做出的變化。

Web網站：以鼠標或觸摸板為操作媒介, 常用交互方式有左擊、右擊、hover鼠標滑過幾個操作方式，對應這些操作的web端可以將隱藏的元素，（比如解釋類文字，及子菜單等）可以在鼠標hover時或是點擊后才展示出來。

移動App：因為實際面積更手指觸控的關系，App常用的交互方式有，手指點擊、滑動、捏合等各種復雜的手勢。同時在App設計時，多遵循用選擇代替輸入，因此設計師需要更多整合信息，并隱藏一些焦點外的內容。

3.3 “藏”的設計方式

（1）提示

通用-小紅點、提示氣泡、文字字重及變色、展開收起常用提示性符號。

（2）內容收起Web網站

點擊下拉、hover下拉。

移動App：滑動拖出內容

4. 功能側重的不同

• Web網站：側重復雜操作類，例如文本編輯，后臺數據上傳下載等，需要大量操作及其他軟件相互協助的功能。
• 移動App：側重相對簡易且場景多變的操作，比如打車，導航等，或是一些適合利用碎片化時間作業的功能。

Tips：我們在“藏”的時候要注意，移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。

5. 網絡環境的不同

Web使用的是Wifi或是電纜等無限量的高速網絡，而App則是移動網絡或是Wifi，網絡環境相對復雜。應對這些不同網絡環境對應的網絡速度，我們可以通過分頁區別化和加載區別化來提高用戶的體驗。

Web網站：一般都是點擊進入鏈接后從0開始加載，也因為網絡穩定的“先天”優勢，讀用翻頁符號來解決分頁問題，也有一些以支撐的網站選擇使用“瀑布流”的方式替代分頁。

比如，花瓣、蘑菇街這類“看圖”的網站，因為搜索后的數據格式相同，用戶對同一內容興趣關注度大，停留對比時間較長，所以優先使用“瀑布流”。

移動App：因用戶使用環境復雜（可能在移動過程中從通暢環境到封閉的信號較差的環境,網絡可能從有到無、從快到慢）。所以和網站有區別的是，我們一般通過用戶主動下載、更新的方式來加載主要框架；實時的數據信息則是在用戶打開App后通過當前網絡加載，也因為網絡不穩定的劣勢，很少有翻頁符號來區別每頁，反復刷新加載會造成等待時間較長。

Tips：注意圖片大小 -加載圖片是對數據流量和網速的“巨大”考驗，因此，我們在一些運營類的項目或者是商場圖片時，尤其是App圖一定要記得壓縮。我們可以用到tinypng.com等在線壓縮圖片的工具進行壓縮，也要提醒開發小哥哥發版前記得壓縮圖片。

總結

• 交互方式，因為操作媒介有所不同，所以我們要注意區分一些狀態和側重；
• 反饋方式，因為瀏覽環境和基礎框架不同，所以我們要注意利用各自空間優勢進行反饋；
• 側重功能，因為各自的操作優勢，我們會對兩端的用戶和功能進行劃分，給出不同的產品側重；

最后是網絡環境，因為兩者各自網絡環境的優劣勢，我們在做頁面布局設計的時候也要作出相應的調整。

雖然現在Web端的網站等在慢慢的被弱化，連鵝廠都放棄了Web端的QQ，但是作為UI設計師，對于Web端的基本工還是不能放棄啊～至少App戰勝不了后臺系統！

參考鏈接：

• https://www.jianshu.com/p/81d4486bc816《網頁中的字體到底該怎么選擇？》
• https://www.jianshu.com/p/cc8916f35d00《用戶界面網頁設計原則》

 

本文由 @Quines 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議