久久国产精品免费一区二区三区,韩国精品一区二区三区四区

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

文章插圖

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