為 PC 端設計小程序 _交互體驗

移動端與 PC 端有著各自獨特的優勢，隨著小程序在越來越多的設備終端上普及，PC 端已成為下一個小程序發揮能力的重要場所。
PC 端相較于移動端具有屏幕更大、操作更精準、效率更高的優勢。那么如何利用這一優勢，將小程序更好地呈現在 PC 端呢？在這里我們總結了一份《小程序適配設計指南》，希望可以幫助你完成小程序從移動端到 PC 端的適配。
本期提綱：
1. 移動端與 PC 端的根本體驗差異
? 物理尺寸
? 操作體驗
? 互動交互
2. 小程序 PC 化的關鍵適配設計要點
? 小程序在 PC 端的內容布局方法
? 互動交互方式的轉譯
3. 特殊場景注意要點
? 小程序彈窗控件不同端口的體驗區別
? 具有隱藏性的操作
? ?面刷新的互動交互
1
移動端與 PC 端的根本體驗差異
移動端與 PC 端的差異從物理尺寸初識、系統能力感知、操作體驗熟悉。
接下來我們將從物理尺寸、操作系統、互動交互 3 個部分來講述這兩端的差異性。
1. 物理尺寸
在物理尺寸上， PC 端尺寸遠大于移動端。現在主流的屏幕尺寸前三名分別為1920 x 1080、1400 x 900、1366 x 768，這意味著大屏幕已經成為未來發展趨勢，更大的尺寸意味著可以展現更多的信息和操作。
當然更大尺寸并不能直接等于更好地體驗，為了充分利用尺寸優勢，你可能需要對自己的小程序做一些適配工作，這部分將在文章第二部分詳細贅述。
2. 操作體驗
在操作體驗上， PC 端的操作視窗具有多任務同時處理、任意調整視窗尺寸的特性。
在移動端則更于單個的窗口的內容展現，它需要將單個窗口的任務單一化、簡潔的呈現在用戶面前。
在單個視窗操作的體驗中，還有一項人機交互上的差別。移動端為了適應人們的單手操作，通常會把控件放置在視窗的中間或底部；而在 PC 端pkpm鋼結構設計系列軟件應用與實例下載，人們通常不會這樣使用，所以基于人機工程，PC 端屏幕上的每一個區域和其他區域一樣都容易觸達。
3. 互動交互
互動交互上，目前可?的移動端都是為觸摸而設計。觸摸意味著提供更大、更易于訪問的觸摸目標，它允許多個手指進行交互操作。例如輕觸、?按、雙指放大 / 縮小、邊緣滑動等。
而 PC 端是通過鼠標鍵盤的配合來進行交互的，這樣的交互形式可以為用戶提供更高精度和速度的輸入能力。
在 PC 端設計的小程序中，特別需要注意將可能遇到的互動操作形式進行轉譯，使 PC 端的小程序更友好、易于使用。
2
小程序 PC 化的關鍵適配設計要點
在上文里，我們已經了解到移動端和 PC 端根本體驗差異。你可能會困擾 “為了適配 PC 端，我是不是需要重新設計我的小程序？”
如果你的小程序已經使用的了官方小程序框架，且交互較為簡單，那么你只需要維護一套代碼即可實現移動端與 PC 端的呈現。為了讓你的小程序展現的更加優秀，你可能需要對你的小程序做一定的適配優化。
那么小程序的設計開發者如何將自己的小程序適配于 PC 端呢？接下來我們為你提供了以下幾點建議。
1. 為了更好地適應 PC 端的大屏體驗，你需要優化小程序的內容布局;
2. 你需要那些移動端轉譯至 PC 端的互動交互方式。
1. 小程序的內容布局如何適應 PC 端的大屏幕體驗?
首先，我們需要解決小程序在 PC 端窗口尺寸產生切換后的使用體驗。
PC 端多任務處理、隨意調整視窗尺寸的操作體驗，意味著小程序在 PC 端需要具有動態布局的適配能力。
未適配的小程序，將無法在 PC 端切換小程序窗口的尺寸，這樣用戶對于小程序的體驗只能限制于默認展示的尺寸大小，難免產生 “小程序窗口為什么不能放大？” 的疑問。
▲ 不能在 PC 端切換窗口尺寸的小程序
為了適應 PC 端窗口尺寸切換的能力，我們建議使用柵格系統、配合響應策略來實現小程序內容隨窗口尺寸變化而變化的動態布局。
關于動態布局，常?的適配方法有以下 7 種。這些適配方法可以讓你的小程序更好更高效的呈現在用戶面前，當然你也可以找到自己更獨特的適配方式。
(1) 左右伸縮
布局特點：將?面元素水平拉伸至屏幕尺寸合適的區域。常用于元素 / 結構簡單的?面，例如列表、表格等。
適配規則：?面顯示高度固定，寬度不是固定值；當布局的顯示大小發生變化時，元素的顯示寬度隨之改變。
▲ 左右伸縮適配
(2) 換行排列
布局特點：將?面元素根據布局寬度來選擇由上下、左右排布。常用于信息架構層級較少的內容呈現型?面，例如內容詳情?等。
適配規則：判斷布局區域的橫向寬度，是否能容納若干元素，若能容納就使用左右排布，容納不了就使用上下排布。
▲ 換行排列適配
(3) 橫向拓展
布局特點：將?面元素重復延伸至相對屏幕尺寸合適的區域。常用于模塊結構固定，且模塊內布局簡單有序的?面，例如電商等。
適配規則：保持?面元素尺寸或間距其中之一不變的前提下，基于布局區域的橫向寬度，在橫向增加更多元素。

文章插圖

文章插圖
▲ 橫向拓展適配
(4) 分?展現
布局特點：利用屏幕寬度優勢，將相同屬性的布局組件，橫向并列排布。常用于信息架構層級較少的內容呈現型?面，例如歌單、應用列表等。
適配規則：可定義單個組件的寬度規則，隨布局區域橫向寬度的變化，自動計算可重復的元素個數。
▲ 分?展現適配
(5) 分層展現
布局特點：將?面分為多欄，分區域展示各模塊內容。分欄具有明顯主從關系，從屬部分依賴于主導部分存在。常用于層級結構明確，且分欄展示不影響信息獲取的?面，例如工具類應用，左側為母菜單，中間為子菜單，右側為內容詳情。
適配規則：設定每欄最小寬度，依據布局區域的橫向寬度，判斷能容納層級數量，展現可呈現的欄數。
▲ 分層展現適配
(6) 自由布局
布局特點：將?面分為多個功能模塊，確定主模塊后，從屬模塊圍繞主模塊布局。常用于?面內存在多個功能模塊情況，其中有且只有 1 個主模塊，例如內容詳情?等。
適配規則：確定主模塊顯示最大值與固定位置，從屬模塊隨布局區域橫向寬度的變化，圍繞主模塊自動計算可呈現模式。
▲ 自由布局適配
(7) 側邊欄
布局特點：?面中存在明顯主從關系，主模塊為導航模塊，在大尺寸下主模塊可使用側邊欄形式顯示，使?面同時能快速瀏覽或操作主從模塊。
適配規則：設定?面斷點寬度，超過斷點尺寸，主模塊變化成?面側邊欄，從屬模塊依據布局區域的寬度自動計算可呈現信息量。
▲ 側邊欄適配
作為一名設計師，你還需要注意，在小程序布局發生變化后保證視圖內的信息完整可讀。例如，?面中的圖片、文字、icon 等信息。
▲ 視圖內信息可讀性對比
2. 互動交互方式如何對應 PC 端進行轉譯?
與 PC 端互動交互不同的是，人們已經在移動端培養出成熟的手勢操作習慣。當這些移動端的小程序重新在 PC 端出現時，相同的預期行為，必須要找到對應的交互方式。
正如下表展現的，我們提供了一些基礎的交互操作轉譯方式。如果你的小程序使用了很多移動設備特有的手勢交互，你可能需要找到相應的替代方式。
▲ 互動交互轉譯表
3
特殊場景注意要點
接下來我們需要聊聊，在小程序適配 PC 端之后還有哪些需要注意的場景。
1. 小程序彈窗控件不同設備的不同體驗
為了符合用戶在移動端單手操作的特性，小程序的彈窗控件通常出現在視窗的中間或底部。而在 PC 端，用戶普遍是用鼠標進行操作。彈窗在用戶對 PC 端視窗進行尺寸切換后，會因適配而產生形變。
針對這種情況，可采用居中彈窗的形式呈現。
▲ 彈窗樣式示意
2. 具有隱藏性的操作
移動端交互中，常通過手勢來展現無需直觀展露的隱蔽操作。在 PC 端，這類操作會造成一些可用性問題。
在 PC 端適配中，如果需要在小程序中提供此類能力，建議轉譯為 PC 端特有的交互方式，例如將移動端左滑菜單轉譯為鼠標右鍵菜單。
▲ 具有隱藏性的操作示意
3. 頁面刷新的互動交互
頁面刷新操作在移動端通常采用手指下拉的操作pkpm鋼結構設計系列軟件應用與實例下載，但這樣的操作形式在 PC 端并不適用。
在 PC 端，通常采用固定位置按鈕，例如用鼠標點擊的操作實現頁面刷新。所以適配過程中，如果你的小程序頁面需要刷新能力，你需要采用一種相對穩定展現形式去呈現。
▲ ?面刷新操作示意
最后，未來微信團隊還會為小程序開發者帶來更加簡單、快捷的適配方案，通過我們的努力，進一步的降低適配多平臺所產生的成本。
PC 端的適配僅僅是小程序在更多平臺上亮相的一個開端，可以想象的是隨著用戶使用的屏幕越來越大，適配后的小程序所能展現的舞臺將具有更大的想象空間，這才是小程序適配最迷人的地方。
上述能力將會發布于微信版 2.9.5 及以上。
— The end —
參考文獻：
《Apple —— 人機界面準則》
《 —— 用戶界面和設計準則》
《華為折疊屏應用開發指南》
《中文網》
*
【為 PC 端設計小程序】本文到此結束，希望對大家有所幫助。

继夫的玩弄H辣文的小说|女人与拘性猛交视频|精品欧美高清不卡高清|一起做亏亏的事情的视频|啦啦啦在线视频观看|望月直播下载ios版本|国产日韩欧美一区二区三区

為 PC 端設計小程序