如何做好手機(jī)端網(wǎng)頁設(shè)計(jì)

　　你有沒有想過? 移動(dòng)端頁面總是做不好,是設(shè)計(jì)水平不夠還是方法出了問題?
 

　　在日常生活中，大部分人對(duì)于手機(jī)的使用度遠(yuǎn)超過電腦，隨著5G時(shí)代的到來，對(duì)于手機(jī)的依賴程度仍呈現(xiàn)上升的趨勢(shì)，而早在幾年前，PC端流量就開始呈現(xiàn)斷崖式的下滑。時(shí)至今日，有90%-95%的流量來源于手機(jī)端，所以手機(jī)端頁面就成了現(xiàn)在設(shè)計(jì)的重中之重。但是現(xiàn)實(shí)工作中，很多設(shè)計(jì)師對(duì)于手機(jī)端頁面設(shè)計(jì)卻不夠擅長!是因?yàn)樘y了嗎?今天AAA教育郭老師就針對(duì)如何做好手機(jī)端網(wǎng)頁設(shè)計(jì)進(jìn)行簡(jiǎn)單的說明。
 

　　一、手機(jī)端網(wǎng)頁設(shè)計(jì)與PC端的區(qū)別
 

　　區(qū)別一：視覺瀏覽比例不同
 

　　在設(shè)計(jì)工作進(jìn)行時(shí)，PC端頁面在PS中實(shí)時(shí)瀏覽的視覺效果，基本上就可以對(duì)應(yīng)其完成上線后的實(shí)時(shí)效果，電腦上視覺瀏覽比例和上線比例近乎1 : 1;而手機(jī)端頁面在PS里實(shí)時(shí)看到的效果與真正在APP中展示的會(huì)有很大差距，電腦上視覺瀏覽比例和上線比例1 : ?，如圖所示：

 

　　區(qū)別二：信息的傳達(dá)更難把控
 

　　正常人在把玩手機(jī)的時(shí)候，眼睛與手機(jī)的舉例大概會(huì)有20公分左右的距離，再加上制作時(shí)的視覺感受與上線后，在視覺比例上也會(huì)有一定差距，所以這就導(dǎo)致手機(jī)端對(duì)于如何將畫面中的信息準(zhǔn)確、清晰的傳達(dá)給用戶，變得更加難把控。

 

　　二、手機(jī)端網(wǎng)頁設(shè)計(jì)需要注意什么?
 

　　1、內(nèi)容識(shí)別性
 

　　這里就要問：做設(shè)計(jì)的目的是什么?是做出來一張復(fù)雜、炫酷、NB的圖就是好的設(shè)計(jì)了嗎?當(dāng)然不是，而是結(jié)合設(shè)計(jì)手法，將需要表達(dá)的信息通過圖文并茂的方式向用戶準(zhǔn)確無誤的傳達(dá)，向用戶傳遞信息才是核心。 這也是很多設(shè)計(jì)師在做手機(jī)端頁面的一個(gè)通病，仍然按照PC端設(shè)計(jì)思維進(jìn)行，忽略了在手機(jī)上實(shí)際的效果呈現(xiàn)，這樣的作品會(huì)讓設(shè)計(jì)工作大打折扣，事倍功半。所以我們應(yīng)該有豎版作圖的思維：

 

　　2、內(nèi)容流暢度
 

　　很多人在做頁面設(shè)計(jì)時(shí)，往往只關(guān)注局部而忽略整體，導(dǎo)致內(nèi)容流暢度缺失，無法激起用戶繼續(xù)閱讀的興趣。這也直接或間接的影響了用戶在頁面上的停留時(shí)間，對(duì)于內(nèi)容傳播也起到了很大的阻礙，商業(yè)價(jià)值也會(huì)隨之降低。為什么手機(jī)端頁面的內(nèi)容流暢度相對(duì)難把控呢? 因?yàn)槭謾C(jī)相比電腦而言，屏幕更小，對(duì)于信息的的捕捉能力遠(yuǎn)小于電腦。若把控能力不強(qiáng)，頁面元素稍多一些就很容易亂。

 

　　三、如何做好手機(jī)端設(shè)計(jì)?
 

　　前面分析了那么多，接下來具體應(yīng)該怎么做才能提升手機(jī)端設(shè)計(jì)的能力?
 

　　1、豎屏構(gòu)圖
 

　　豎屏構(gòu)圖并不單單指上下結(jié)構(gòu)，也強(qiáng)調(diào)了“屏”的概念，就是常說的：一屏、兩屏……手機(jī)端頁面設(shè)計(jì)中，把每一屏當(dāng)做一個(gè)制作單位，會(huì)很大程度上提升作品內(nèi)容的流暢度以及用戶捕捉信息的效率：

 

　　因?yàn)樵?a href="http://m.lb577.com/ui/2585.html" target="_blank">手機(jī)端設(shè)計(jì)中，橫向的構(gòu)圖空間狹小、拓展性很弱，而豎向構(gòu)圖則更靈活，可塑性更強(qiáng)，也更符合我們的瀏覽習(xí)慣。這類一屏一個(gè)制作單位的形式比較適合詳情頁的制作。
 

　　在一些手機(jī)端專題頁設(shè)計(jì)中，我們很難將每一個(gè)內(nèi)容都做成一屏的展示形式，因?yàn)樵趶?qiáng)調(diào)視覺的同時(shí)，還要兼顧運(yùn)營、銷售的特質(zhì)，很多運(yùn)營側(cè)會(huì)要求一屏內(nèi)多展示一些內(nèi)容。盡管如此，我們?nèi)匀豢梢园凑肇Q屏構(gòu)圖的思維方式設(shè)計(jì)：

 

　　所謂豎屏思維可以理解為：以手機(jī)的一屏為單位，要讓每一屏不管是視覺還是信息傳達(dá)，都能給人一種一目了然、舒服的視覺感受。
 

　　2、卡片式設(shè)計(jì)
 

　　在手機(jī)上，把每個(gè)信息模塊按照類似卡片的形式展示，會(huì)讓頁面在手機(jī)端展示時(shí)的內(nèi)容信息更具條理性，減少用于捕捉信息的阻礙，在這方面App Store做的就不錯(cuò)：

 

　　卡片式設(shè)計(jì)比較適用于手機(jī)端頁面，提升了用戶捕捉信息的效率，在視覺上也很舒服、和諧。這種形式在PC端不太好發(fā)揮。
 

　　3、少即是多
 

　　由建筑大師路德維希·密斯·凡德羅提出的：“Less is more"，但又絕不是簡(jiǎn)單得像白紙一張，讓你覺得空洞無物，根本就沒有設(shè)計(jì)。設(shè)計(jì)中的理解就是留白，手機(jī)的屏幕本就遠(yuǎn)小于電腦，加之用戶在頁面上的停留時(shí)間短暫，在短時(shí)內(nèi)如何把有效的文字信息、視覺信息傳遞給用戶就是手機(jī)端設(shè)計(jì)不得不考慮的問題。減少一些不必要的裝飾元素對(duì)于信息傳遞的阻礙，做到元素減少，信息傳達(dá)的更多。
 

　　4、放大圖文
 

　　由于手機(jī)端用戶瀏覽節(jié)奏比較快、停留時(shí)間短，所以要盡量圖文放大，以便提升其對(duì)用戶的視覺沖擊力以及用戶捕捉信息的速度，同時(shí)結(jié)合前面所說的豎屏構(gòu)圖：

 

　　圖文放大，對(duì)于提升信息辨識(shí)度以及視覺美觀度都有很大幫助，同時(shí)也會(huì)讓作品留給用戶的視覺印象更加深刻。
 

　　四、總結(jié)
 

　　所以說，豎版頁面總是做不好是設(shè)計(jì)水平不夠嗎?其實(shí)并不是!只是我們還按照PC端設(shè)計(jì)的思維模式去做手機(jī)端已不再合適，而是要轉(zhuǎn)變方法，針對(duì)不同的使用場(chǎng)景要在思維上有所區(qū)分。手機(jī)端最主要的還是：在短暫的時(shí)間內(nèi)盡可能多的傳達(dá)有效信息，減少用戶的瀏覽壓力。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。