微信小程序是一種快速發(fā)展的應(yīng)用形式，設(shè)計(jì)良好的小程序能夠提升用戶體驗(yàn)并吸引更多的用戶。在設(shè)計(jì)微信小程序時(shí)，有一些關(guān)鍵的指南可以幫助我們做出出色的設(shè)計(jì)。以下是即時(shí)設(shè)計(jì)總結(jié)的一些設(shè)計(jì)指南，希望能對(duì)準(zhǔn)備設(shè)計(jì)微信小程序的人有所幫助。

即時(shí)設(shè)計(jì)有上千款微信小程序設(shè)計(jì)相關(guān)設(shè)計(jì)資源??

https://js.design/community?category=search&search=%E5%B0%8F%E7%A8%8B%E5%BA%8F&sortType=usage

https://js.design/community?category=design&source=zhihu&plan=yzbz39

1、突出界面重點(diǎn)

在設(shè)計(jì)開(kāi)始時(shí)，明確你的設(shè)計(jì)流程，保持用戶面板簡(jiǎn)潔，避免過(guò)多廣告的干擾。我們應(yīng)該使用準(zhǔn)確清晰的導(dǎo)航來(lái)引導(dǎo)用戶進(jìn)入他們想要的界面。微信小程序的所有頁(yè)面，包括內(nèi)嵌網(wǎng)頁(yè)和插件，都會(huì)在右上角放置官方小程序菜單，開(kāi)發(fā)者不能自定義其內(nèi)容，但可以選擇深淺兩種基本配色以適應(yīng)頁(yè)面設(shè)計(jì)風(fēng)格。

即時(shí)設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)師在「即時(shí)設(shè)計(jì)」上創(chuàng)作的一款出行旅游類小程序界面設(shè)計(jì)??

2、導(dǎo)航設(shè)計(jì)流程明確

設(shè)計(jì)導(dǎo)航時(shí)，盡量與官方導(dǎo)航菜單保持一定的差異，以便用戶能夠區(qū)分它們。可以自定義圖標(biāo)樣式、標(biāo)簽文案以及文案顏色。除了導(dǎo)航欄顏色之外，開(kāi)發(fā)者不能對(duì)內(nèi)容進(jìn)行自定義。

3、減少用戶等待時(shí)間

在啟動(dòng)小程序時(shí)，應(yīng)盡量減少用戶等待時(shí)間。如果不可避免地出現(xiàn)加載和等待的時(shí)間，需要及時(shí)向用戶提供反饋，以緩解他們的等待情緒。例如，可以設(shè)計(jì)下滑刷新頁(yè)面的等待動(dòng)畫(huà)、頁(yè)面加載反饋以及局部的加載反饋。

由即時(shí)設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)師在「即時(shí)設(shè)計(jì)」上創(chuàng)作的一款生活社區(qū)類小程序界面設(shè)計(jì)??

https://js.design/community?category=detail&type=resource&id=613f46afa781860684fe240c&source=csdn&plan=yzcsdn39

4、處理異常情況的備用方案

在設(shè)計(jì)任務(wù)和流程時(shí)，往往容易忽略異常狀態(tài)和流程，而這些異常場(chǎng)景往往是最影響用戶體驗(yàn)的。因此，需要特別注意異常狀態(tài)的設(shè)計(jì)，在出現(xiàn)異常時(shí)給予用戶必要的狀態(tài)提示，并提供解決方案，避免用戶產(chǎn)生負(fù)面情緒。

在表單頁(yè)面中，尤其是表單項(xiàng)較多的頁(yè)面，要明確指出錯(cuò)誤的項(xiàng)目，以便用戶進(jìn)行修改。不要讓用戶在異常狀態(tài)下莫名其妙地停留在某一個(gè)頁(yè)面，不知道該點(diǎn)擊哪里。

5、注意設(shè)計(jì)尺寸

微信小程序的設(shè)計(jì)只需要以 iPhone 6 的屏幕尺寸為基準(zhǔn)，因?yàn)槲⑿判〕绦蚴褂?rpx 作為 CSS 尺寸單位，rpx 可以同步適配所有屏幕寬度。在小程序中，除了狀態(tài)欄、導(dǎo)航欄和控件圖標(biāo)外，主要是內(nèi)容。內(nèi)容的布局形式可以采用各種風(fēng)格樣式，但需要注意各個(gè)板塊之間適當(dāng)留白，保持合理的間距。如果內(nèi)容都堆砌在一起，會(huì)給用戶使用時(shí)帶來(lái)視覺(jué)負(fù)擔(dān)。

由即時(shí)設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)師在「即時(shí)設(shè)計(jì)」上創(chuàng)作的一款電商家居類小程序界面設(shè)計(jì)??

6、頁(yè)面布局

應(yīng)用界面的布局是設(shè)計(jì)中非常重要的一部分，可以讓用戶直觀地了解界面中的重點(diǎn)內(nèi)容以及該小程序能夠滿足用戶的哪些需求。移動(dòng)界面布局應(yīng)該強(qiáng)調(diào)主要內(nèi)容或功能，較大的控件比較小的控件更能吸引用戶的注意力，讓用戶在使用時(shí)更專注于重要信息，實(shí)現(xiàn)精準(zhǔn)定位。

7、構(gòu)圖干凈，配色符合品牌背景

對(duì)于進(jìn)入小程序的用戶來(lái)說(shuō)，整體顏色的統(tǒng)一可以大大增強(qiáng)他們的視覺(jué)體驗(yàn)。在設(shè)計(jì)產(chǎn)品時(shí)，將小程序的整體顏色風(fēng)格與你設(shè)計(jì)的品牌主題一致，會(huì)使用戶對(duì)品牌的感知更加緊密。此外，小程序制作中還有其他細(xì)節(jié)規(guī)則，包括控件間距、版式設(shè)計(jì)和字體大小規(guī)范等。在初次接觸小程序開(kāi)發(fā)時(shí)，可能很難將所有需要的元素完善，這時(shí)可以借鑒即時(shí)設(shè)計(jì)「資源廣場(chǎng)」中其他設(shè)計(jì)師設(shè)計(jì)的作品來(lái)完善我們當(dāng)前的作品。即時(shí)設(shè)計(jì)「資源廣場(chǎng)」提供大量免費(fèi)的組件和界

8、設(shè)計(jì)模板，可以直接復(fù)制到工作臺(tái)調(diào)用。

微信小程序的設(shè)計(jì)只是前臺(tái)頁(yè)面，還需要前端接口獲取數(shù)據(jù)、設(shè)計(jì)庫(kù)數(shù)據(jù)和后臺(tái)框架頁(yè)面，功能需要根據(jù)品牌需求來(lái)制定。如果是團(tuán)隊(duì)共同完成，那么一個(gè)合適的協(xié)同設(shè)計(jì)工具非常重要。即時(shí)設(shè)計(jì)是一個(gè)無(wú)需下載的基于瀏覽器的協(xié)作 UI 設(shè)計(jì)工具，許多 UI 設(shè)計(jì)師和團(tuán)隊(duì)都在使用這個(gè)工具。它可以在同一個(gè)文檔中處理多個(gè)面板，設(shè)計(jì)過(guò)程十分靈敏，并且支持云端實(shí)時(shí)儲(chǔ)存，能夠提高制作過(guò)程的質(zhì)量和效率。

35個(gè)喜茶小程序高保真設(shè)計(jì)界面??