市面上主流的界面設計主要包括移動端、web端、桌面端、硬件、插件等，app和網站設計是大部分設計師最常見的設計需求，這兩個也是最核心的設計端平臺，所以明白web端和移動端設計的相似和差異并且知道如何應對是至關重要的。
整體來說，移動端的設計是更可控的，web端的設計難度實際更高，上限也更高。但是想要做好web端的設計并不難，只要明白web端設計時需要考慮的因素和解決辦法，那么所有問題自然迎刃而解。
總體上，移動端和web端的字體規范是一致的，同一套字體大小都可以在雙端有好的識別和視覺效果。唯一細微的區別是瀏覽器支持的最小字體大小是12，所以在web端要摒棄12以下的字號。實際上這并不會增加你的web端設計難度，因為web端的設計空間是足夠的。
設計中往往需要考慮文案長度的問題，移動端受到屏幕空間的限制往往更容易遇到問題，你需要考慮當前文本段是否能在你所預留的空間放得下，對此可以參考以下幾種解決辦法：
-
高度自適應：也就是換行顯示，大部分的文本段不可能無限換行，也應該有字數限制，所以選擇這一個解決辦法，正常也需要設定一個高度極限值。
-
超出省略：當文本段的完整性不是那么重要，且需要漏出，那么這是一個不錯的方法
-
字號自適應縮小：這正常用在金融類產品的數字顯示中，比如余額等，當小數點過多或者金額過大導致的數字文本端過長時，數字是無法換行或省略的，所以你可以選擇字號自適應縮小。
移動端和web端最直觀的差異就是屏幕大小的差異，移動端小，且各設備的差異化細微，web端的空間大，且不同設備的屏幕差異大，所以就有了幾點主要差異：
移動端整體上是自上而下的設計布局，寬度受限比較嚴重，所以除了一些左滑手勢帶來的橫向空間拓展，布局的變化上不大。
web端因為空間大，所以就有了更多的布局可能性，例如左右布局，居中布局，左中右布局，或是全屏自適應布局。這些布局方式也各有各的優缺點。
所以設計一個網站時，往往需要多個布局配合使用，能讓你的網站視覺感受更舒適，利用率上更合理。切忌為了美觀或者方便等原因死磕一個布局方式。當然，居中布局是最萬能的一個布局，如果你暫時沒辦法掌控多個布局，那么居中布局是你最佳的選擇。
前文說了，因為web端的設備差異大，所以你需要在設計時考慮小屏筆記本和大屏顯示器的適配問題，甚至是用戶手動拉動瀏覽器寬度時所得到的適配反饋也需要考慮其中。
適配不是必須的，因為適配的成本較高，復雜的頁面往往需要設計出多個斷點頁面去讓開發根據頁面寬度重新適配內容。所以大部分的居中布局的網站，是不做適配的，因為你只需要控制你的內容寬度能在13寸筆記本完整展示，其他的就是極小部分用戶的需求了。
web端到移動端的適配往往需要重構，也就是把當前網站的內容，重新在手機寬度下做設計，結合上文文本部分的內容，請不要想當然的把字號縮小。只需要考慮排版和功能是否需要刪減的問題。
移動端受到屏幕限制，彈窗的更多是banner的彈出，提示的作用，或者是個別簡單篩選操作，在移動端很難在彈窗上放置很多的輸入等復雜操作
在web端的設計中，一定要巧用彈窗，簡單的編輯或著創建等操作都可以用彈窗代替，不僅可以使操作更聚焦，也可以減少頁面跳轉來縮短路徑。
由于操作媒介的不同，導致移動端和web的操作手勢有很大的區別，移動端是用手指操作，web端是鼠標操作，手指操作決定了手勢的多樣性，鼠標的操作決定了點擊的精確，并且由于鼠標的操作反饋是分階段的，需要在每個階段都給予用戶相應的反饋來打造更好的用戶體驗。
移動端中對于操作的反饋主要聚焦于手指點擊后的反饋，懸停態往往被長按代替。而web端鼠標操作存在三個狀態，一個是正常狀態，一個是懸停狀態，一個是按下狀態，這三個狀態需要在設計師考慮并設計來向開發說明。web端中不同元素的常見狀態（主要為懸停態）區分方式需要明白：
-
button：用顏色區分，常見的方式是改變顏色的明度，懸停增加明度，按下降低明度
-
icon：icon的狀態區分更多是在懸停狀態上，常見方式有：改變顏色；改變icon形態（如線性變面性）；為icon添加背景色塊（如圓形灰色背景）。
-
文字：文字的狀態區分除了顏色之外，可以利用文字自帶的屬性，如字重，字體大小，甚至可以在個別海外產品中看到通過改變字間距來表示懸停狀態。
-
卡片：卡片的懸停設計更加的多樣，如改變填充色；改變描邊顏色；增加投影，比較有趣的有改變卡片大??；輕微改變卡片透視；改變卡片的位置，如懸停時卡片向上輕微移動。
由于web端獨有的懸停手勢，你可以在懸停這個手勢大作文章，如果你了解linear風格的話，或者經常瀏覽國外產品的話，許多網站會在鼠標懸?？ㄆ瑫r產生動效，動效不限于卡片元素（插畫、圖標、可視化表格等）的動畫；光影描邊的循環。懸停按鈕時，箭頭的位置變動，或者其他動畫效果。更酷炫的還有鼠標與卡片透視的交互，甚至與鼠標與全局頁面的交互，如水波紋等。
整體來說，web端基于屏幕大小的優勢和狀態的多樣，在操作按鈕漏出數量和方式上會更加的多樣。
移動端獨有的是長按手勢和左滑右滑手勢，所以移動端會把一些操作放到左滑手勢中，最常見的如消息列表的置頂、刪除等。長按手勢更多的是彈出更多操作，或是產生可拖動效果。
web端拿列表舉例，基于屏幕的大小的優勢，可以將更多操作直接在列表右側直接漏出，用戶的操作路徑更短，觸達率自然就更高。拿卡片舉例，button的存在有的時候會影響到卡片的大小和美觀，所以有些操作往往可以藏到懸停狀態里，懸停操作不需要學習，所以用戶不會為此感到疑惑，也可以保證功能的完整性。
關于各個模塊如何設計并不在這里展開，我想表達是在設計稿設計時的一些操作思路，或者說是組件的搭建思路。
如果你對前端開發有一定的了解，那么你一定懂得盒子套盒子。設計也是如此，需要給你的每個設計模塊建議一塊獨有的盒子。這是區別于間距或分割線的區分模塊的思路的。
舉個例子，你有圖片，主標題，副標題三個元素形成一個小模塊，那么你在確定好排版之后，你需要一個盒子將他們裝起來，那么這個模塊必須有它自己的寬度，高度。換個角度理解也就是它需要有一定的上下左右間距，在figma中，這個盒子就是你的frame，高級一點就是你的自動布局。這個盒子的大小就決定了這個模塊的操作熱區，這也方便你在設計做出你的懸停效果。
這個設計思維適用于web端和移動端，且十分重要，所以盡量避免在設計圖出現各個元素分別散落的情況，這不僅不利于你的設計稿管理，也不利于開發的查看。
在進行web端設計時，如果你對web端設計一無所知，也無需驚慌。你可以找到合適的參考網站，并且分析它每個模塊的高度，間距等，去模仿他，并且從中得出規律。
拿web端的導航欄舉例，假設你糾結于web端的導航欄高度設置多少，你可以找到參考的網站，使用檢查功能（F12）去查看高度，或粗暴的截圖查看高度即可。當然，在此之前，你需要確定這個模塊的高度是不會隨屏幕大小改變而改變的。
無論是web端設計還是移動端設計，當你在設計模塊或搭建組件時，善用自動布局，這不僅有利于你設計圖高效率修改，也能應對你的web端可能出現的適配情況。這需要考驗你的figma能力，如果大家有興趣，后續我可以出一些figma基礎、組件、自動布局等相關教程同大家探討。
作者：PONEPENG
來源：站酷
藍藍設計(www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計
軟件qt開發、軟件wpf開發、軟件vue開發
