雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

微信小程序商城ui界面設(shè)計怎么做,微信小程序商城ui界面設(shè)計技巧

Time: 2022-01-04

  現(xiàn)在的手機(jī)功能很多,僅僅微信就有很多衍生和附加的功能,比如在微信小商城里面就有很多我們喜歡的小程序。今天就讓faceui為大家介紹微信小程序商城ui界面設(shè)計怎么做,微信小程序商城ui界面設(shè)計技巧。

  微信小程序商城ui界面設(shè)計怎么做

  1、字號大小

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

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

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

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

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

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

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

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

  2、色彩

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

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

  圖片來源于網(wǎng)絡(luò)

  3、布局排版

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

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

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

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

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

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

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

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

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

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

  1、路徑單一

  小程序和App不同,APP的功能點(diǎn)可以很多,但是小程序的用戶路徑要盡量單一,滿足用戶某一場景的需求即可,千萬不要貪多嚼不爛。

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

  圖片來源于網(wǎng)絡(luò)

  2、減少頁面跳轉(zhuǎn)

  跳轉(zhuǎn)新頁面會增加用戶適應(yīng)新頁面元素的成本,同時小程序的頁面層級過多,會讓用戶感覺到繁瑣焦慮。頁面跳轉(zhuǎn)越少、對用戶的干擾越小,用戶瀏覽體驗(yàn)會更好。

  3、注重頁面邏輯

  小程序的主頁是由各個不同版塊組成的,圖片banner、快捷按鈕、商品及分類、標(biāo)題、視頻、各種營銷優(yōu)惠功能等等。

  一般來說,人們?yōu)g覽習(xí)慣是從上到下,從左到右,所以你盡量在小程序頂部放上顯眼banner來吸引訪客。

  4、色彩平衡

  小程序是輕量級應(yīng)用,所以不需要太花里胡哨的色彩,盡量走簡潔清爽風(fēng)。不同的顏色會給人不同感覺:紅色色感熱烈,對人刺激性很強(qiáng),易引起注意;藍(lán)色冷靜、樸實(shí),會給人提供一個深遠(yuǎn)平靜的空間;紫色的明度較低,給人一種沉悶神秘的感覺。

  具體用什么主色調(diào),要根據(jù)小程序的類型來選擇,色調(diào)要與品牌主題一致,這樣能給客戶留下盡量深刻的印象。

  5、內(nèi)容充實(shí)

  小程序要輕而美,但并不是說你就要做一個空殼子。在排版簡單、明晰的情況下,小程序的內(nèi)容應(yīng)盡量豐富,可以添加多個版塊、文章。千萬別做無實(shí)質(zhì)內(nèi)容的小程序,那樣通常很難通過微信審核。

  以上就是faceui為大家介紹的關(guān)于微信小程序商城ui界面設(shè)計的相關(guān)內(nèi)容。微信小程序是現(xiàn)在很多用戶喜歡登陸軟件的一個渠道,做好微信小程序商城ui界面設(shè)計非常重要。

合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開