|
如何保證小程序的開發(fā)兼顧兩種平臺(tái)的界面風(fēng)格,，并與微信本身的體驗(yàn)保持統(tǒng)一呢,？閱讀微信官方的設(shè)計(jì)文檔是最有效的方式。 里面提供了大量的用戶界面實(shí)例,，開發(fā)者只需嚴(yán)格依據(jù)這份設(shè)計(jì)文檔,，就可以做出兼具美觀、實(shí)用的 UI 與交互模式,。 為了幫助大家更快地理解設(shè)計(jì)文檔,，知曉程序（微信號(hào) zxcx0101）專門準(zhǔn)備了這份文檔解讀，不僅將設(shè)計(jì)文檔的篇幅濃縮到二分之一,，還在文末增加了小程序 UI 設(shè)計(jì)與傳統(tǒng)的移動(dòng)應(yīng)用設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)的差異比較,。現(xiàn)在，只需花一半的時(shí)間看這篇文章,，你就能掌握設(shè)計(jì)文檔的所有要點(diǎn),。注：本文主要針對(duì)小程序開發(fā)者和 UI 設(shè)計(jì)師。如果想零基礎(chǔ)學(xué)習(xí)小程序開發(fā),，請(qǐng)繼續(xù)關(guān)注知曉程序（微信號(hào) zxcx0101）的后續(xù)內(nèi)容,。微信小程序設(shè)計(jì)文檔將所有的設(shè)計(jì)范例分為了四個(gè)部分，分別是：友好禮貌 清晰明確 便捷優(yōu)雅 統(tǒng)一穩(wěn)定
除此之外,，微信官方還提供了一些便于開發(fā)者使用的組件,，這些組件可以在微信官方的小程序 IDE 中直接使用。設(shè)計(jì)文檔也針對(duì)這部分組件進(jìn)行了詳細(xì)說明,，包括每個(gè)組件的適用范圍,。同時(shí)，還提供了 Sketch 與 Photoshop 的設(shè)計(jì)模板,，便于 UI 設(shè)計(jì)師直接使用,。 知曉程序（微信號(hào) zxcx0101）建議：沒有太多設(shè)計(jì)經(jīng)驗(yàn)的開發(fā)者請(qǐng)盡可能使用微信提供的組件樣式，這樣可以在快速開發(fā)的前提下,，保證小程序的用戶體驗(yàn),。 微信官方希望小程序?qū)Ｗ⒔鉀Q用戶當(dāng)前的問題，做一個(gè)「管家」,，而非是在用戶處理問題時(shí)候,，一直制造干擾的「推銷員」。首先，每一個(gè)頁面都應(yīng)該聚焦于某個(gè)重點(diǎn)功能,，不能與該功能無關(guān),。例如，搜索頁面的功能應(yīng)該是「搜索」,，與搜索無關(guān)的功能或內(nèi)容（如 banner 廣告以及誘導(dǎo)搜索關(guān)鍵詞推廣等）應(yīng)該盡可能去除掉,。
 官方錯(cuò)誤示例，在搜索頁中添加無用信息
其次,，頁面的導(dǎo)航應(yīng)該按照用戶的預(yù)期進(jìn)行。例如,，用戶跳轉(zhuǎn)進(jìn)入一個(gè)頁面時(shí),，小程序不應(yīng)該彈出與之無關(guān)的廣告，因?yàn)閺V告不符合用戶進(jìn)入頁面的預(yù)期,。 官方錯(cuò)誤示例,，進(jìn)入頁面彈出與功能無關(guān)廣告知曉程序（微信號(hào) zxcx0101）建議：小程序設(shè)計(jì)時(shí)應(yīng)該以快速解決用戶問題為目標(biāo)，并為其提供明確且符合預(yù)期的步驟導(dǎo)航,。而這與張小龍?jiān)谘葜v中提到的「用完即走」的概念是吻合的,。用戶在操作小程序時(shí)，小程序應(yīng)該為用戶明示當(dāng)前狀態(tài),，同時(shí)應(yīng)盡力減少用戶在操作上的限制和等待時(shí)間,。微信官方已經(jīng)為小程序提供了全局導(dǎo)航欄，包括導(dǎo)航區(qū)（返回按鈕）,、標(biāo)題區(qū)和操作區(qū)三組,。如果開發(fā)者有需要，可以在小程序的首頁中使用頁面內(nèi)導(dǎo)航,，包括頂部 Tab 樣式和底部標(biāo)簽樣式,。每種樣式至少需要兩個(gè)標(biāo)簽，最多不能超過五個(gè)標(biāo)簽,，而微信官方給出建議是最多不要超過四個(gè),。 官方提供的底部標(biāo)簽和頂部 Tab 樣式開發(fā)者可以定義導(dǎo)航欄和頁面內(nèi)導(dǎo)航的風(fēng)格顏色。在定義顏色時(shí),，開發(fā)者需要注意元素辨識(shí)度,，不能出現(xiàn)刺眼和按鈕與文字可視性差的情況。小程序中的加載反饋細(xì)節(jié)也是影響整體體驗(yàn)的重要部分,。微信提供了一個(gè)下拉刷新組件,，只需要按照要求套用即可。同時(shí),，頁面內(nèi)的加載提示推薦使用局部加載反饋而非全局加載反饋,。加載時(shí)間較長時(shí)，建議提供進(jìn)度條以減緩用戶等待的焦灼感。 下拉刷新樣式和局部加載示例
微信小程序提供三個(gè)結(jié)果提示方式,，提示效果從輕至強(qiáng)的分別為小彈窗提示（toast）,、模態(tài)框提示（modal）和單獨(dú)的成功結(jié)果頁面。開發(fā)者需要根據(jù)實(shí)際情況,，對(duì)不同程度的提示進(jìn)行合理利用,。 知曉程序（微信號(hào) zxcx0101）建議：操作反饋時(shí)用 toast，詢問行為時(shí)用 modal,，表單提交后用頁面,。
 Toast、Modal 和成功頁面這份設(shè)計(jì)文檔特別強(qiáng)調(diào)了異常情況的設(shè)計(jì),。在小程序中,，異常情況需要明確告知用戶出現(xiàn)了問題，同時(shí)明確告知用戶問題出在哪里,、應(yīng)該如何解決,。文檔對(duì)表單中填寫出錯(cuò)情況的提示樣式進(jìn)行了規(guī)定。 表單錯(cuò)誤提示示例如果表單中出現(xiàn)錯(cuò)誤,，小程序應(yīng)該在頂部彈出提示,，并在錯(cuò)誤項(xiàng)目的右側(cè)提供錯(cuò)誤 icon，以便用戶定位問題,。比如，當(dāng)用戶在進(jìn)行輸入時(shí),，可以通過聯(lián)想,、API 接口以及其他方式（例如掃描銀行卡等），幫助用戶快速準(zhǔn)確地填充輸入內(nèi)容,。 掃描銀行卡快速填充內(nèi)容在設(shè)計(jì)時(shí),，應(yīng)該確保用戶的誤操作概率更低。微信官方在文檔中提到,，可點(diǎn)擊元素應(yīng)該要保證足夠大,，以便用戶能夠有明確的點(diǎn)擊反饋。但知曉程序（微信號(hào) zxcx0101）提醒,，文案及 icon 不讓用戶困惑也是減少誤操作的重要方式之一,。在設(shè)計(jì)文檔中，有關(guān)于統(tǒng)一穩(wěn)定的說法更傾向于「統(tǒng)一」,。即小程序在整體上應(yīng)該要為用戶提供整齊劃一的功能,，避免同一種視覺元素中在不同頁面中有不同的樣式。這樣的原則,，有助于保證用戶的認(rèn)知穩(wěn)定性,。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候,，應(yīng)盡可能避免一個(gè)小程序中多種元素風(fēng)格差異較大的情況。這樣既不能保證小程序的視覺統(tǒng)一性,，同時(shí)也對(duì)用戶的認(rèn)知穩(wěn)定造成嚴(yán)重破壞,。知曉程序（微信號(hào) zxcx0101）建議：在開發(fā)過程中，可以將相同的組件的樣式規(guī)定于一個(gè)全局 WXSS 文件中,，以便開發(fā)時(shí)快速復(fù)用并保證視覺統(tǒng)一,。如果網(wǎng)頁設(shè)計(jì)師或移動(dòng)應(yīng)用 UI 設(shè)計(jì)師轉(zhuǎn)向開發(fā)小程序的話，了解小程序與之前設(shè)計(jì)領(lǐng)域的異同是很有必要的,。知曉程序（微信號(hào) zxcx0101）以這份設(shè)計(jì)文檔為基礎(chǔ),，講解小程序 UI 設(shè)計(jì)與傳統(tǒng)的移動(dòng)應(yīng)用設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)的差異。1. 如果你是網(wǎng)頁設(shè)計(jì)師對(duì)于網(wǎng)頁設(shè)計(jì)師來說,，小程序界面設(shè)計(jì)最大的挑戰(zhàn)在于以往桌面為先的思維需要轉(zhuǎn)向移動(dòng)為先,，因?yàn)樽鳛橐豢钜蕾囀謾C(jī)運(yùn)行的應(yīng)用，微信小程序需要聚焦于移動(dòng)使用,。屏幕尺寸與比例。移動(dòng)設(shè)備的屏幕一般會(huì)比桌面設(shè)備的屏幕更小,，同時(shí)屏幕比例從橫向變成了縱向,。 輸入設(shè)備。桌面設(shè)備擁有鼠標(biāo)和鍵盤,，而移動(dòng)設(shè)備上,，用于信息輸入的幾乎只有手指。 網(wǎng)絡(luò)特性,。桌面端不需要考慮網(wǎng)絡(luò)問題,，但在移動(dòng)設(shè)備上，用戶使用的網(wǎng)絡(luò)可能會(huì)有流量限制或速率限制,。
因此,，知曉程序（微信號(hào) zxcx0101）要提醒網(wǎng)頁設(shè)計(jì)師，在設(shè)計(jì)小程序界面的時(shí)候需要注意這些差異：多花點(diǎn)功夫在排版上,。在移動(dòng)設(shè)備上使用程序,，不像是在電腦上使用那么輕松自在。為小程序的元素和文字進(jìn)行排版時(shí),，這些元素和文字應(yīng)適當(dāng)放大,，同時(shí)加大間距。 避免花哨元素,。過于花哨的元素在小屏幕上容易「吸」走用戶的注意力,，不符合設(shè)計(jì)文檔中的規(guī)范，同時(shí)會(huì)增加用戶的網(wǎng)絡(luò)流量和載入時(shí)間,。 注意導(dǎo)航系統(tǒng)設(shè)計(jì),。小程序沒有「面包屑」（導(dǎo)航指示器），在設(shè)計(jì)的時(shí)候需要確保用戶不會(huì)在頁面中迷失，同時(shí)需要保證用戶的下一步符合其預(yù)期,。 多測試,。在轉(zhuǎn)換至小程序的初期，強(qiáng)烈建議將設(shè)計(jì)原型稿放到真機(jī)進(jìn)行測試和評(píng)估,。
2. 如果你是移動(dòng) UI 設(shè)計(jì)師對(duì)于 UI 設(shè)計(jì)師來說,，小程序帶來了一個(gè)好消息和一個(gè)壞消息。好消息：移動(dòng) UI 中的設(shè)計(jì)思維和范式,，絕大部分都能用在小程序設(shè)計(jì)上,，且設(shè)計(jì)師不需要為 iOS 與 Android 分別設(shè)計(jì)界面，只需將有差異的部分進(jìn)行分情況討論即可,。壞消息：微信原生提供的控件較為有限,。微信中只提供了多種按鈕、Toast,、提示 icon,、開關(guān)、多選框,、復(fù)選框和滑塊等幾種控件,。其他的控件需要自己根據(jù)實(shí)際風(fēng)格進(jìn)行開發(fā)和設(shè)計(jì)。此外,，微信小程序的風(fēng)格與 iOS HIG 和 Material Design 兩種設(shè)計(jì)范式差異都較大,。在設(shè)計(jì)時(shí)，需要多加注意設(shè)計(jì)文檔中的說明和范例,，以便設(shè)計(jì)出符合標(biāo)準(zhǔn)的小程序界面,。對(duì)微信小程序設(shè)計(jì)文檔的解讀就到這里為止了。希望通過這份解讀文檔,，能幫助開發(fā)者輕松開發(fā)出具有優(yōu)良體驗(yàn)的小程序,。 注：正文圖片來自微信官方
|
