習(xí)慣，是一個(gè)強(qiáng)大的敵人。對于設(shè)計(jì)師來說，尤其如此。
微信小程序是近兩年才出現(xiàn)的新事物，而網(wǎng)頁設(shè)計(jì)出現(xiàn)已經(jīng)超過20多年。目前大多數(shù)的設(shè)計(jì)師都是脫胎于網(wǎng)頁設(shè)計(jì)師，并且不少設(shè)計(jì)師從事網(wǎng)站設(shè)計(jì)超過五年以上。這就產(chǎn)生了一個(gè)問題——長時(shí)間從事網(wǎng)頁設(shè)計(jì)，會(huì)形成一些“設(shè)計(jì)習(xí)慣”，而這樣的設(shè)計(jì)習(xí)慣是不適合微信小程序設(shè)計(jì)的。
本文，我們就來討論這樣一個(gè)問題——僅僅從設(shè)計(jì)的角度而言，網(wǎng)站設(shè)計(jì)與微信小程序設(shè)計(jì)，究竟有哪些不同？

輸入設(shè)備不同導(dǎo)致的設(shè)計(jì)差異

PC端的輸入主要依靠鍵盤和鼠標(biāo)，輸入精度較高，所以，這就影響了網(wǎng)站設(shè)計(jì)。例如，網(wǎng)站的排版，即便是較為緊湊，體驗(yàn)影響不大，不會(huì)導(dǎo)致誤操作。但是，智能手機(jī)的輸入，主要依靠攝像頭，由于鍵盤小，使用鍵盤輸入會(huì)導(dǎo)致出錯(cuò)率高，也體驗(yàn)不好。
這樣的差異，導(dǎo)致了PC網(wǎng)頁設(shè)計(jì)和微信小程序設(shè)計(jì)的差異。
舉例來說，一家金融公司的網(wǎng)站和小程序，當(dāng)需要輸入卡號的時(shí)候，網(wǎng)站上面可以讓用戶直接輸入卡號，但是，微信小程序可以引導(dǎo)用戶通過拍照識別卡號的方式，完成輸入。
 

“自由作文”和“話題作文”導(dǎo)致的設(shè)計(jì)差異

在筆者看來，網(wǎng)頁的設(shè)計(jì)自由度更大，但是小程序的設(shè)計(jì)自由度更小。為什么呢？這是因?yàn)槲⑿艦樾〕绦蛱峁┝撕芏酂o法改變的欄目、格式、樣式、配色。
例如，菜單配色方面，微信只為小程序提供深淺兩種配色方案，而菜單配色方案往往影響整個(gè)頁面的配色，為了配合既定的“配色方案”，小程序頁面配色只能選擇匹配微信提供的配色方案。
還例如，官方小程序菜單將放置在界面固定位置，開發(fā)者在設(shè)計(jì)界面時(shí)請預(yù)留出該區(qū)域空間，并且，需要開發(fā)者周圍的交互，與官方固定交互小匹配。也是因?yàn)槿绱?，大多?shù)小程序都選擇了在“固定位置”左側(cè)，設(shè)計(jì)了搜索欄。
 

設(shè)計(jì)藝術(shù)與用戶體驗(yàn)的優(yōu)先不同

網(wǎng)站設(shè)計(jì)被眾多設(shè)計(jì)師認(rèn)為是可以體現(xiàn)出設(shè)計(jì)藝術(shù)的，包括使用藝術(shù)元素、交互藝術(shù)、設(shè)計(jì)師個(gè)人喜好等等，可以在PC網(wǎng)頁設(shè)計(jì)中體現(xiàn)出來。但是，在信小程序設(shè)計(jì)中，體驗(yàn)“藝術(shù)”的空間非常有限。
 

例如，圖標(biāo)、交互、反饋效果等，在PC網(wǎng)頁設(shè)計(jì)的時(shí)候，都能夠體現(xiàn)出個(gè)性藝術(shù)。但是，在設(shè)計(jì)小程序的時(shí)候，圖標(biāo)、交互、反饋效果，都是微信自動(dòng)提供的，只能使用微信提供的標(biāo)準(zhǔn)件，設(shè)計(jì)藝術(shù)就很難體現(xiàn)?？梢哉f，微信小程序?qū)⒂脩趔w驗(yàn)置于設(shè)計(jì)藝術(shù)之前。

綜上，就是我們總結(jié)的網(wǎng)頁設(shè)計(jì)與微信小程序設(shè)計(jì)的不同點(diǎn)，僅供參考。