四川少BBB搡BBB爽爽爽_四川女人毛多水多A片_四川BBBBBB搡BBBBB_四LLL少妇BBBB槡BBBB_私密直播全婐APP免费魅影_爽到喷水(H)

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識(shí)
電商中的極簡(jiǎn)設(shè)計(jì)|上篇

2016-09-12

3051

電子商務(wù)經(jīng)過了幾年的發(fā)展已經(jīng)逐漸成熟,并且已經(jīng)發(fā)展出了自己的模式和風(fēng)格。但是對(duì)于電商的設(shè)計(jì)風(fēng)格大多數(shù)人還停留在最初的用商品堆砌+文字信息+各種亂七八糟的效果。而這兩年各個(gè)電商公司已經(jīng)非常重視設(shè)計(jì)了,而且設(shè)計(jì)風(fēng)格也逐步走向簡(jiǎn)潔乃至極簡(jiǎn)的風(fēng)格。這種變化是隨著電商的不斷發(fā)展,更加重視產(chǎn)品的品質(zhì)而進(jìn)化的。

下面從3個(gè)方面來講一下如何做極簡(jiǎn)的設(shè)計(jì),每個(gè)里面都有一些具體的知識(shí)點(diǎn)。

尤于內(nèi)容過長(zhǎng),在手機(jī)端一次性看完太費(fèi)眼,所以我把他折分為上中下三部。今晚我們先來吸收上篇,極致的版式。

這是錘子T1的頁面設(shè)計(jì),雖然好多人都不喜歡老羅,但是我覺得他有對(duì)設(shè)計(jì)特有的一種完美主義的偏執(zhí),無論是手機(jī)的外型(各種對(duì)稱)還是系統(tǒng)UI的設(shè)計(jì),我覺得作為設(shè)計(jì)師我還應(yīng)該多向他學(xué)習(xí)一下?;氐巾撁嬖O(shè)計(jì)本身,我們來分析一下這個(gè)頁面的設(shè)計(jì)。

一、極致的版式

可能大家開始畫畫的時(shí)候就接觸和學(xué)習(xí)構(gòu)圖了,而構(gòu)圖就是版式設(shè)計(jì)的基礎(chǔ)。但我們往往忽略了對(duì)于構(gòu)圖和版式的極致追求,一般我們總會(huì)說,差不多看著舒服就行,可是對(duì)于設(shè)計(jì)師的能力晉升我們還需要更加重視版式的設(shè)計(jì)。

下面是幾個(gè)版式設(shè)計(jì)的技巧:

1.對(duì)齊—最基礎(chǔ)但也最重要

上面圖A、B、C是對(duì)頁面重新排版,圖D是原有的設(shè)計(jì)。雖然總體看起來都還可以,但是我們?nèi)匀豢梢院苤庇^的看出來

圖A的構(gòu)圖有些頭重腳輕,讓人感覺中心偏下;

圖B的手機(jī)主體物有種對(duì)文案的擠壓感,讓人覺得壓抑;

圖C的手機(jī)和文案成為90°的夾角,讓人覺得有種阻礙感,不順滑;

圖D的設(shè)計(jì)很好的協(xié)調(diào)了主體圖與文案的關(guān)系,并且給人一種從遠(yuǎn)及近的中距離縱深感。

整個(gè)畫面中間對(duì)齊更能最大限度的突出主體——手機(jī)。從錘子的網(wǎng)頁設(shè)計(jì)中我們可以觀察到,這種排版方式是中間對(duì)齊,無論是橫向還是豎向。

再看幾個(gè)中間對(duì)齊的例子:

設(shè)計(jì)家也是用的中間對(duì)齊方式,大寫的V視覺沖擊力非常強(qiáng),而左上角的Logo信息和右下角的信息成為對(duì)角形式,讓人感覺畫面非常平衡而又穩(wěn)定。

小米2015年的新品發(fā)布會(huì)海報(bào)也采用了中間對(duì)齊的形式,讓關(guān)看者很容易的就聚焦到中間“新年禮物”的重要信息上。

由此我們總結(jié)出對(duì)齊的版式的幾個(gè)特點(diǎn)和作用:

A、視覺聚焦;

B、強(qiáng)化頁面統(tǒng)一性和條理性;

C、對(duì)視覺的導(dǎo)向作用。

2.對(duì)比—讓畫面不再平凡

作為簡(jiǎn)潔乃至極簡(jiǎn)的設(shè)計(jì)來說,對(duì)比非常重要,對(duì)比可以讓人非常快速的閱讀到重要信息,也可以讓版面的設(shè)計(jì)有節(jié)奏感,讓畫面看起來不乏味。

上面的設(shè)計(jì)是小牛N1和一加3的設(shè)計(jì),這兩個(gè)設(shè)計(jì)是典型的左右排版。

右側(cè)放商品圖片,左側(cè)排列簡(jiǎn)單而有用的基本文案信息。

而左右兩邊的圖片和文案信息的大小對(duì)比要要根據(jù)商品的屬性來決定的。

例如,一加手機(jī)主要體現(xiàn)手機(jī)的外型和質(zhì)感,所以放置2個(gè)占比面積較大的手機(jī),搭配最基本的文案信息(只有手機(jī)名字、價(jià)格和購買按鈕)。

這個(gè)設(shè)計(jì)則與一加和小牛相反,文案面積很大,但是我們的視覺中心依然是手表,因?yàn)閷?shí)物的照片往往會(huì)更加吸引人,這就是對(duì)比。

但是還有一個(gè)對(duì)比不知道大家看出來沒有,就是文案里的對(duì)比,標(biāo)題選用大而粗的字體,其他信息則放的很小,大能又快有準(zhǔn)的看清標(biāo)題的內(nèi)容,另外因?yàn)樽煮w大小和粗細(xì)的變化讓人感覺有節(jié)奏感。

3. 有“氣質(zhì)”的留白

極簡(jiǎn)設(shè)計(jì)里的留白非常重要,最典型的是無印良品的設(shè)計(jì),它是把留白應(yīng)用到現(xiàn)在設(shè)計(jì)里最好的典范,但是我覺得我們中國(guó)人才是留白的“老祖宗”,國(guó)畫就是非常典型的例子。

下面我們來做個(gè)對(duì)比,我們把圖上的一些不必要的復(fù)雜背景和文案給去除。主要是讓產(chǎn)品主體和主要信息展示的更加清晰和明確。

再做更進(jìn)一步的精簡(jiǎn),增加留白的面積,使產(chǎn)品和產(chǎn)品信息更加清晰的傳達(dá)出來。

下面是其他一些案例我們可以試著自己分析一下,注意留白不一定就是白色。

上篇就是大概的這些內(nèi)容

總結(jié)一下:

留白!

適當(dāng)在頁面中,或者主元素的四周多留一些空白;

或者在某個(gè)商品圖的四周留一些空白,不要太滿;

去掉不必要的復(fù)雜背景和文案。讓產(chǎn)品主體和主要信息展示的更加清晰和明確。

對(duì)比!

對(duì)比分為大小對(duì)比、色彩對(duì)比、形狀對(duì)比、面積對(duì)比、字體對(duì)比、空間對(duì)比、文案對(duì)比。

對(duì)比的作用是讓主要的內(nèi)容突出化,讓要人看到的第一眼信息清晰的呈現(xiàn)出來!也可以讓版面的設(shè)計(jì)有節(jié)奏感,讓畫面看起來不乏味。

對(duì)齊!

元素與元素間,元素與整體的某個(gè)邊的基線對(duì)齊。大對(duì)齊,小對(duì)比。

對(duì)齊作用有:

A、視覺聚焦;

B、強(qiáng)化頁面統(tǒng)一性和條理性;

C、對(duì)視覺的導(dǎo)向作用。


本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:廣州網(wǎng)頁設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè)


免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案
武穴市| 甘泉县| 周至县| 鞍山市| 大洼县| 通榆县| 鹰潭市| 闵行区| 湘潭县| 富宁县| 栾城县| 浮山县| 宁阳县| 邳州市| 夏津县| 延津县| 绥宁县| 九江市| 赣州市| 徐汇区| 新干县| 东平县| 三门县| 永定县| 桐庐县| 双辽市| 邮箱| 辛集市| 怀集县| 沈丘县| 临海市| 明水县| 浑源县| 毕节市| 丹巴县| 枣阳市| 睢宁县| 泽库县| 建阳市| 体育| 集安市|