我們都知道，微信的功能是十分強(qiáng)大的，不僅可以通話聯(lián)系，還可以收付款，而且微信上還有很多小程序。那在設(shè)計(jì)小程序界面時(shí)，大家知道微信小程序商城ui界面設(shè)計(jì)包括哪些方面嗎？一起跟faceui小編來(lái)了解一下吧。

　　什么是ui界面設(shè)計(jì)

　　UI界面設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡(jiǎn)稱。

　　微信小程序商城ui界面設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。國(guó)內(nèi)大部分UI工作者都是從事這個(gè)行業(yè)，是了解軟件產(chǎn)品、致力于提高軟件用戶體驗(yàn)的產(chǎn)品外形設(shè)計(jì)師。

　　這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。

　　微信小程序商城ui界面設(shè)計(jì)

　　1.字號(hào)大小

　　一個(gè)好的小程序UI界面，首先映入眼簾的就是頁(yè)面字號(hào)大小，下面是眼睛距離與常用的字號(hào)大小關(guān)系:

　　視距近:30cm以內(nèi)

　　字號(hào)使用:9pt(點(diǎn))--12pt(點(diǎn))

　　網(wǎng)頁(yè)中會(huì)稍微大些為12pt/14pt，在應(yīng)用響應(yīng)式網(wǎng)頁(yè)布局的情況下在手機(jī)里顯示會(huì)按照百分比進(jìn)行放大的，手機(jī)APP(2倍手機(jī))里正文字號(hào)大小為20px/24px。

　　視距中:300cm以內(nèi)

　　字號(hào)使用:2cm以上，當(dāng)然是越大越能看清楚但需要符合版式美感。建議童鞋們自己帶個(gè)格尺到顯示中找尋需要制作的物品進(jìn)行實(shí)際測(cè)量看在3米以內(nèi)是否能夠看清楚以及是否得當(dāng)。

　　視距遠(yuǎn):300cm以外

　　字號(hào)使用:正文字比較少根據(jù)版式需要一定設(shè)計(jì)的非常大。

　　2.色彩

　　設(shè)計(jì)中講究形與色的組合，具體用什么主色調(diào)，要根據(jù)小程序的類型來(lái)選擇，比如美妝、女裝類可用比較溫暖的色調(diào);數(shù)碼、電子類可用冷硬的藍(lán)、黑色調(diào)。但千萬(wàn)不可太多顏色混搭在一起，用色過(guò)多會(huì)導(dǎo)致訪客眼花繚亂，頁(yè)面沒(méi)有主次之分。

　　3.布局排版

　　布局，就是小程序內(nèi)各版塊、圖標(biāo)、文字的排列。通過(guò)合理的布局，我們能讓訪客分清主次，抓住重點(diǎn)。比如哪個(gè)商品是小程序中的“主角”，那就把它放在顯眼的位置;哪些比較次要，那就放在底部。

　　布局設(shè)計(jì)尤其要遵循CRAP原則:

　　C--Contrast(對(duì)比)，通過(guò)圖標(biāo)大小和位置等的對(duì)比，區(qū)分出誰(shuí)是主角，誰(shuí)是配角，誰(shuí)是群演。

　　R--Repetition(重復(fù))，一個(gè)級(jí)別的信息盡量使用一種設(shè)計(jì)來(lái)保持用戶的認(rèn)知，避免用戶認(rèn)為是另一種信息分類。

　　A--Alignment(對(duì)齊)，你的圖標(biāo)、海報(bào)、列表等應(yīng)該對(duì)齊，不可隨意擺放、

　　P--Proximity(親密性)，有關(guān)系的兩個(gè)圖標(biāo)盡量放在一起，比如衣服，你的“短袖”、“長(zhǎng)袖”分類最好相鄰，這樣的排列會(huì)更具邏輯性。

　　微信小程序商城ui界面設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　運(yùn)用網(wǎng)格系統(tǒng)排版可以讓畫面更加統(tǒng)一，在平衡的基礎(chǔ)上可以變換層次感，讓畫面更加有條理，讓內(nèi)容更易讀，體驗(yàn)度更強(qiáng)

　　平面:尊重常用分欄進(jìn)行劃分，尺寸可以有小數(shù)點(diǎn)但需要達(dá)到均衡感。

　　網(wǎng)頁(yè):為了符合程序員開(kāi)發(fā)代碼，一般按2的倍數(shù)進(jìn)行欄與間距的劃分，不要出現(xiàn)奇數(shù)與小數(shù)點(diǎn)，小數(shù)點(diǎn)不好書寫，奇數(shù)不好對(duì)齊。

　　看完了上文faceui小編的介紹，大家應(yīng)該對(duì)什么是ui界面設(shè)計(jì)以及微信小程序商城ui界面設(shè)計(jì)包括哪些方面的相關(guān)內(nèi)容有所了解了吧。微信上有很多商場(chǎng)小程序，使用十分方便，用戶可以隨時(shí)點(diǎn)進(jìn)去選購(gòu)商品。