2017年1月9日，小程序帶著“不確定”性來(lái)到了這個(gè)世界上，作為UI的我們，應(yīng)該知道哪些呢？
主要從以下兩點(diǎn)來(lái)介紹～～
1.設(shè)計(jì)環(huán)境
1.微信小程序尺寸單位為rpx，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)（ 什么是rpx呢 ?? rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx。在iPhone6上，設(shè)備分辨率為750px，則750rpx=750px，即1rpx=1px，所以設(shè)計(jì)稿使用設(shè)備寬度750px比較容易計(jì)算。）
2.開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 ( 2X ) 作為視覺(jué)稿的標(biāo)準(zhǔn)
3.頁(yè)面深度不可超過(guò)5層
4.開發(fā)包限制2MB
2.與app的差異
小程序本身的特點(diǎn)決定它設(shè)計(jì)上的特殊性。
總的來(lái)講就是比普通的APP更講究扁平化的設(shè)計(jì)，這是非常重要的準(zhǔn)則。產(chǎn)品設(shè)計(jì)在視覺(jué)上要表現(xiàn)的輕盈、干凈、高效；功能層級(jí)上要結(jié)構(gòu)單純、跳轉(zhuǎn)少、層級(jí)簡(jiǎn)單；其次要高效地展現(xiàn)內(nèi)容，設(shè)計(jì)風(fēng)格統(tǒng)一和諧。
因?yàn)椴恍枰惭b，占用內(nèi)存空間忽略不計(jì)，所以進(jìn)入時(shí)要方便加載，要盡量控制本地?cái)?shù)據(jù)、精簡(jiǎn)界面控件，做減法設(shè)計(jì)。
為了能一次開發(fā)能在各種終端清晰良好顯示，在界面上的圖像元素選擇的優(yōu)先級(jí)是：簡(jiǎn)單形狀＞多種效果形狀＞攝影圖，也就是要求設(shè)計(jì)元素盡量單純。
小程序的設(shè)計(jì)都是在微信的大環(huán)境里做的，有很多動(dòng)效因受限于微信本身，是無(wú)法實(shí)現(xiàn)的，所以要求動(dòng)效必須簡(jiǎn)單、好用。
1.設(shè)計(jì)的精簡(jiǎn)
舉個(gè)例子
在視覺(jué)上最直觀的體現(xiàn)就是扁平化視覺(jué)的處理，盡量少用分割線，還有線框這些割裂感比較強(qiáng)的設(shè)計(jì)方式，圖形的形狀盡量簡(jiǎn)單，盡量讓內(nèi)容本身來(lái)展現(xiàn)和區(qū)隔。
在首頁(yè)中，除了下方文章與文章之間用了灰色的間隔之外，整個(gè)首頁(yè)去掉了其他的分割與線條。在書籍管理頁(yè)中，上下的書籍之間，用自身文字塊和空間做了區(qū)隔。在手機(jī)登錄頁(yè)面里，輸入框和登錄的按鈕也使用了色塊的樣式，整個(gè)頁(yè)面只保留了和登錄最緊密相關(guān)的內(nèi)容，使得頁(yè)面整體感變強(qiáng)，去掉了其他元素的干擾。
關(guān)于動(dòng)效
在動(dòng)效的設(shè)計(jì)上，因?yàn)橛行┬Ч芟抻谖⑿疟旧?，我們盡量用最簡(jiǎn)單但是也最好用的方式來(lái)實(shí)現(xiàn)需要達(dá)到的效果。
使得整個(gè)操作連貫，友好，用簡(jiǎn)單的動(dòng)效貫穿了用戶所有的操作。
2.功能都簡(jiǎn)潔
我們可以看一下騰訊視頻app與騰訊視頻小程序都區(qū)別有哪些？
在功能上，APP有很多附加功能，如：熱點(diǎn)，當(dāng)前熱播的節(jié)目，廣場(chǎng)（doki），游戲等。
APP中頂端的導(dǎo)航欄在小程序中移到了下方的tab里，被分成了兩塊：短視頻和頻道；
搜索欄右邊的“游戲”、“離線下載”、在小程序中取消了，“觀看歷史”在小程序中移到了的“我的”tab里。
由于體量不同，設(shè)計(jì)的重心也不太一樣，小程序的設(shè)計(jì)相對(duì)來(lái)說(shuō)更加簡(jiǎn)單一些，因?yàn)樾〕绦蚴浅休d于微信APP之中，所以功能的垂直是小程序價(jià)值最大的體現(xiàn)。
小程序和APP設(shè)計(jì)最大的一個(gè)區(qū)別在于頂欄的操作，微信小程序是沒(méi)有頂欄操作內(nèi)容的，它只有兩個(gè)個(gè)按鈕，前一個(gè)是關(guān)于和轉(zhuǎn)發(fā)，后一個(gè)是關(guān)閉。在一般的APP中，頂欄一般會(huì)設(shè)計(jì)導(dǎo)航，但是在小程序中，由于頂欄的設(shè)計(jì)屬于微信端內(nèi)，所以在設(shè)計(jì)上，要考慮界面的重新分配。
從對(duì)摩拜的APP和小程序做對(duì)比后可以看到，在摩拜的APP中，個(gè)人中心和消息放置在了頂欄兩側(cè)，但是在小程序中，個(gè)人中心變成了懸浮按鈕放在了屏幕右下方，去掉了消息按鈕，精簡(jiǎn)了整個(gè)產(chǎn)品的功能。
對(duì)比滴滴出行APP和小程序可以看到，在APP中，點(diǎn)擊首頁(yè)左上角的個(gè)人中心圖標(biāo)，它的二級(jí)頁(yè)面是以側(cè)邊欄彈窗的形式出現(xiàn)，這個(gè)功能只有在APP中才能獨(dú)立實(shí)現(xiàn)，小程序中是無(wú)法實(shí)現(xiàn)的。
在滴滴出行小程序中，個(gè)人中心放到了頂欄下方的導(dǎo)航中，點(diǎn)擊個(gè)人中心，進(jìn)入了二級(jí)頁(yè)面，左上角添加了返回按鈕，返回按鈕是目前小程序最依賴的頁(yè)面跳轉(zhuǎn)的交互方式。需要注意的是，小程序相較于APP的穩(wěn)定性沒(méi)有那么好，所以在功能層級(jí)上結(jié)構(gòu)要盡量單純，盡量減少跳轉(zhuǎn)，而且小程序規(guī)定頁(yè)面的深度不可超過(guò)5層，否則體驗(yàn)會(huì)變得很差。
每個(gè)頁(yè)面都應(yīng)有明確的重點(diǎn)，以便于用戶每進(jìn)入一個(gè)新頁(yè)面的時(shí)候都能快速地理解頁(yè)面內(nèi)容。在確定了重點(diǎn)的前提下，應(yīng)盡量避免頁(yè)面上出現(xiàn)其它與用戶的決策和操作無(wú)關(guān)的干擾因素。
在登錄頁(yè)進(jìn)行登錄，當(dāng)有多個(gè)并列操作時(shí)，設(shè)計(jì)指南里規(guī)定，需要有明確的主次之分，在這個(gè)頁(yè)面，我們希望用戶更多的使用微信賬號(hào)進(jìn)行登錄，所以在視覺(jué)上加重了微信賬號(hào)登錄的按鈕顏色，和手機(jī)號(hào)登錄的按鈕在顏色上做了明顯的區(qū)分，給用戶一個(gè)明確的提示，主動(dòng)去引導(dǎo)用戶的行為。
在書籍搜索頁(yè)進(jìn)行搜索，當(dāng)頁(yè)面功能比較少時(shí)，設(shè)計(jì)指南里規(guī)定，界面要簡(jiǎn)明扼要，突出重點(diǎn)，不要出現(xiàn)過(guò)多的干擾項(xiàng)，所以其他和搜索功能不相干的功能，不要添加。
由于手機(jī)鍵盤區(qū)域小而且密集，輸入困難的同時(shí)還易引起輸入錯(cuò)誤，因此根據(jù)設(shè)計(jì)指南，在設(shè)計(jì)小程序頁(yè)面時(shí)因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的控件來(lái)改善用戶輸入的體驗(yàn)。
在書籍搜索頁(yè)面，當(dāng)不得不讓用戶進(jìn)行手動(dòng)輸入時(shí)，提供了歷史搜索的快捷選項(xiàng)，應(yīng)盡量讓用戶做選擇而不是鍵盤輸入，選擇比輸入體驗(yàn)會(huì)更友好，另一方面也避免造成輸入錯(cuò)誤。當(dāng)用戶輸入內(nèi)容進(jìn)行搜索時(shí)，及時(shí)根據(jù)用戶的輸入進(jìn)行聯(lián)想，盡可能減少用戶的輸入，當(dāng)用戶希望重新輸入時(shí)，輸入框右側(cè)提供的清除按鈕可以及時(shí)幫助用戶清除現(xiàn)有的輸入內(nèi)容，進(jìn)行重新輸入搜索。
這一項(xiàng)雖然在APP里也有體現(xiàn)，但不是必要的，而在小程序設(shè)計(jì)指南里，這一項(xiàng)是被列為必要的。
這是微信小程序給的設(shè)計(jì)指南～～做為參考哦哦
https://developers.weixin.qq.com/miniprogram/design/index.html
加我微博? RuiJ_? 一起討論設(shè)計(jì)問(wèn)題，觸碰更多靈感～
https://weibo.com/u/2991630622
更多的設(shè)計(jì)請(qǐng)關(guān)注：
