如何做好UI詳情頁設(shè)計(jì)

如何做好UI詳情頁設(shè)計(jì)?
 

UI詳情頁設(shè)計(jì)技巧有哪些?
 

UI詳情頁設(shè)計(jì)重要嗎?
 

UI詳情頁設(shè)計(jì)有什么好處?
 

為什么做UI詳情頁設(shè)計(jì)?
 

UI詳情頁設(shè)計(jì)思路是什么?
 

　　最近很多的朋友留言想要了解UI詳情頁設(shè)計(jì)的相關(guān)知識(shí)，今天郭老師我就針對(duì)比較典型的幾個(gè)問題進(jìn)行了梳理，寫了這篇UI詳情頁設(shè)計(jì)文章，希望更能夠幫助這些朋友解答疑惑，好啦，廢話不多說，我們說干貨。好的詳情頁會(huì)給帶給用戶更流暢的視覺體驗(yàn)、更直觀的產(chǎn)品信息、亮點(diǎn)等等，也有助于提升交易的達(dá)成率。正是如此，所以很多商家不惜重金請(qǐng)?jiān)O(shè)計(jì)師為其打造爆款產(chǎn)品的詳情頁，由此可見詳情頁在設(shè)計(jì)中的重要程度。今天AAA教育郭老師就針對(duì)UI詳情頁設(shè)計(jì)進(jìn)行簡單的說明。
 

　　構(gòu)圖形式
 

　　目前被認(rèn)可的一種詳情頁設(shè)計(jì)形式是分屏式，就是按照手機(jī)端設(shè)計(jì)思維，以一屏為單位制作，最后整合成一個(gè)完整的詳情頁，這種形式有助于提升視覺流暢度及內(nèi)容識(shí)別度，所以我們可以將每一屏都當(dāng)作一張海報(bào)來制作。而說到海報(bào)，就離不開設(shè)計(jì)構(gòu)圖。
 

　　詳情頁的構(gòu)圖與傳統(tǒng)的 PC 端海報(bào)有所不同，因?yàn)樵斍轫撛O(shè)計(jì)更注重手機(jī)端，所以一屏的內(nèi)容又可以看做是手機(jī)端豎向的海報(bào)。而一幅出彩的海報(bào)，必然需要優(yōu)質(zhì)的骨架。
 

　　那么常見豎向海報(bào)構(gòu)圖形式有哪些?下面為大家總結(jié)了幾種在詳情頁設(shè)計(jì)中比較實(shí)用的構(gòu)圖形式：
 

　　這三種構(gòu)圖形式看似簡單，實(shí)則兼顧了手機(jī)端的很多必要點(diǎn)，比如：視覺的流暢度、整潔度、辨識(shí)度、用戶的接受度等等，詳情頁設(shè)計(jì)在構(gòu)圖及版式方面并不需要很復(fù)雜，反而干凈整齊的畫面更易于視覺表達(dá)，也更利于手機(jī)端展示。
 

　　看似簡單的構(gòu)圖，反而在詳情頁設(shè)計(jì)中非常實(shí)用，僅靠這三種構(gòu)圖，完全可以做出很優(yōu)秀的詳情頁。另外還有一些從這三類衍生的構(gòu)圖形式，也比較常用：

　　文案在配圖下半部分的這類構(gòu)圖相比而言用的少一些、也難把控一些，當(dāng)然用的好了在版式上會(huì)有打破、眼前一亮的視覺感受，只是這類構(gòu)圖不宜多用，完整的詳情頁中出現(xiàn) 1-2 次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：

　　詳情頁的構(gòu)圖不宜太復(fù)雜，這六種構(gòu)圖形式完全夠日常工作，只需選取其中 1-3 種構(gòu)圖形式交替使用即可。以上構(gòu)圖示例中標(biāo)識(shí)的裝飾元素可以是線條、英文、圖標(biāo)、數(shù)字、實(shí)物素材等等，也可以選擇不使用，具體情況根據(jù)配圖的留白以及重心靈活使用即可。
 

　　所以，詳情頁中每一屏的構(gòu)圖并不難，完全可以把這六種構(gòu)圖形式當(dāng)做公式，需要哪種直接套用其結(jié)構(gòu)就可以(結(jié)構(gòu)類似即可，并非要求1:1)。另外配圖形式可以分為三種：全屏、半屏、透明圖，具體的構(gòu)圖形式需要結(jié)合畫面整體的重心、留白、美觀度決定。更通俗一些的話，構(gòu)圖就可以理解為填空，內(nèi)容就往空的地方填，注意好適量的留白。
 

　　合理的設(shè)計(jì)素材
 

　　說到設(shè)計(jì)素材，浮在腦海中的可能會(huì)很多種，而這次要說的主要是三類，即：手勢(shì)、植物、肌理(在花瓣搜索關(guān)鍵詞「手勢(shì)」「植物」「材質(zhì)」就能找到對(duì)應(yīng)素材)，這三類素材在詳情頁設(shè)計(jì)中出現(xiàn)的頻率也是很高的，如果運(yùn)用得當(dāng)會(huì)將詳情頁的出彩度提升一個(gè)檔次，而且對(duì)于視覺表達(dá)也會(huì)更加生動(dòng)、形象、富有說服力。
 

　　1. 手勢(shì)素材
 

　　顧名思義，就是各種各樣關(guān)于手方面的動(dòng)作，比如：拿、托、指等等。

　　2. 植物素材
 

　　這類素材相信大家都不陌生，在很多頁面以及詳情頁出現(xiàn)的頻率都很高，而且裝飾性很強(qiáng)，寓意也很寬泛，比如：自然、清新、貼合現(xiàn)實(shí)、有生機(jī)等等。

　　3. 肌理素材
 

　　關(guān)于材質(zhì)、肌理的妙用在前面很多文章中都有提到過，這里簡單地說一下，肌理素材對(duì)于提升作品細(xì)節(jié)感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問題，不妨用肌理素材試試。
 

　　抽象名詞具體化
 

　　單看標(biāo)題可能很多人不太明白，什么叫做抽象名詞具體化?其實(shí)簡單理解就是：將一些比較抽象的名詞通過設(shè)計(jì)手法表現(xiàn)出來，比如風(fēng)、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗(yàn)、加快用戶理解，而且在視覺上能生動(dòng)形象的將抽象化名詞表現(xiàn)出來，對(duì)于視覺出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺傳達(dá)的時(shí)效性。
 

　　總結(jié)
 

　　詳情頁設(shè)計(jì)不可忽視的兩點(diǎn)：視覺的流暢度以及文案辨識(shí)度。文章所提到的一些構(gòu)圖方式、元素使用、視覺表現(xiàn)形式都是為大家提供一個(gè)可供參考的方向，落實(shí)到工作中要靈活運(yùn)用、舉一反三。一般情況下，一款詳情頁大概有 2-4 屏比較出彩的即可，能形成一定的對(duì)比，不至于視覺疲勞、千篇一律。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。