產品設計之跨設備設計

來自專欄產品·設計·在線教育

隨著電子設備的豐富，我們使用的設備也變得多樣。從最小的可穿戴式設備，到隨身不離手的智能手機，再到用戶辦公、學習的PC電腦……用戶在不同設備之間切換任務與工作。作為設計師，在設計產品的同時，也需要考慮產品在不同設備之間的適配性。

根據數據統計，近24個月，中國的設備尺寸佔有率移動端為54.29%，PC端約為43.88%，平板約為1.84%，用戶最常用的移動端和PC端設備尺寸為360 X 640，1366 X 768。由於不同設備屏幕尺寸不同，若僅有一種設計方案，往往無法滿足在不同設備上的使用與操作。同時，用戶在不同場景下對於不同設備的偏好與使用頻率也不同。如，用戶在動態的室外環境中，一般使用小型的移動設備(如智能手機、手錶)，而在相對靜態的室內環境中(如家、辦公室或圖書館)，更偏好使用大尺寸的設備(如平板電腦、PC等)。因此，不同大小的設備，承載的功能也會有一定的差異。

跨設備設計方案

跨設備設計，需要考慮產品能夠適配不同大小尺寸的設備，同時還需要考慮不同系統之間的切換(iOS、安卓)。在筆者的工作中，主要遇到的問題是網站的適配，以下是兩種常見的設計解決方案。

一、布局不變

採用CSS的Media Query技術，通過流體布局(fluid grids)，在不改變布局的條件下，對圖片、視頻等頁面元素進行百分比的縮放來適應不同尺寸大小的設備。這種方式的優點是能夠以較低的成本適配大部分的屏幕尺寸，缺點是適配方案可能無法滿足過大或者過小的極端設備尺寸。常用的方法有拉伸縮放，換行平鋪或對頁面元素進行刪減、增加等。

二、布局改變

針對不同屏幕大小的頁面尺寸，設計不同的布局。採用自適應的方法，對不同屏幕大小的設備進行差異化的設計，能夠更加精準地適應不同的設備，讓適配效果更精準。這種方案也要求設計師出不同的設計稿，增加一定的成本。

跨設備設計備忘錄

一、考慮使用場景

前面提到，不同設備往往使用場景不同，所承載的內容也不同。在設計產品的過程中，考慮極端設備尺寸大小，保證不遺漏每一個場景。並且針對不同的使用場景，對產品功能進行調整。比如，微信在智能手錶端，更多承載的是閱讀消息的功能，而在移動端或者PC端，則主要承載著社交等功能。

二、從最主要的設備尺寸開始設計

根據產品的主要使用場景，從用戶使用最頻繁和最主要的設備開始設計。由於現在移動端依然是市場佔有率最多的設備，因此建議從移動端開始設計。然後再慢慢往大屏設備設計。從小屏設備設計起的好處是可以讓設計者從最核心的產品功能設計起，再進行平板、PC端的設計時，則可以在已有的核心基礎功能上做加法。

三、用戶體驗保持一致

同樣的產品在不同設備上的體驗上應該是一樣的。設計師需要儘可能將交互和體驗納入到一套體系當中來。這樣也能保證用戶在不同設備上的使用能夠保持順暢和一致。

四、操作與數據的同步性

保證數據的同步性，讓用戶能夠在不同設備之間無縫連接切換任務。比如，音樂播放或者視頻播放類產品，用戶在不同設備上使用時，都能夠快速進入上次播放的地方，繼續進行任務。

小結：由於當下設備之多，考慮到人力的限制，我們不可能針對所有設備去做相應的設計，因此，在人力、財力允許的條件下，如何讓我們的設計儘可能適應更多的設備，是設計師需要思考的。在設計的時候，多多考慮目標用戶與目標使用場景，將核心的產品完善，再考慮適配更多的設備與平台。

這是跨設備設計的一些小結與思考，歡迎大家交流~

推薦閱讀：