火星網(wǎng)校
電商UI設(shè)計之極致的版式
發(fā)布時間：2024-01-23 18:28:29 瀏覽量：207次
寫在前面：
電子商務(wù)經(jīng)過了幾年的發(fā)展已經(jīng)逐漸成熟，并且已經(jīng)發(fā)展出了自己的模式和風格。但是對于電商的設(shè)計風格大多數(shù)人還停留在最初的用商品堆砌+文字信息+各種亂七八糟的效果。而這兩年各個電商公司已經(jīng)非常重視設(shè)計了，而且設(shè)計風格也逐步走向簡潔乃至極簡的風格。這種變化是隨著電商的不斷發(fā)展，更加重視產(chǎn)品的品質(zhì)而進化的。
下面從3個方面來講一下如何做極簡的設(shè)計，每個里面都有一些具體的知識點。
先看一下極簡設(shè)計的案例：
這是錘子T1的頁面設(shè)計，雖然好多人都不喜歡老羅，但是我覺得他有對設(shè)計特有的一種完美主義的偏執(zhí)，無論是手機的外型（各種對稱）還是系統(tǒng)UI的設(shè)計，我覺得作為設(shè)計師我還應(yīng)該多向他學(xué)習(xí)一下。回到頁面設(shè)計本身，我們來分析一下這個頁面的設(shè)計。
一、極致的版式
可能大家開始畫畫的時候就接觸和學(xué)習(xí)構(gòu)圖了，而構(gòu)圖就是版式設(shè)計的基礎(chǔ)。但我們往往忽略了對于構(gòu)圖和版式的極致追求，一般我們總會說，差不多看著舒服就行，可是對于設(shè)計師的能力晉升我們還需要更加重視版式的設(shè)計。
下面是幾個版式設(shè)計的技巧：
1.對齊——最基礎(chǔ)但也最重要
上面圖A、B、C是對頁面重新排版，圖D是原有的設(shè)計。雖然總體看起來都還可以，但是我們?nèi)匀豢梢院苤庇^的看出來，圖A的構(gòu)圖有些頭重腳輕，讓人感覺中心偏下；圖B的手機主體物有種對文案的擠壓感，讓人覺得壓抑；圖C的手機和文案成為90°的夾角，讓人覺得有種阻礙感，不順滑；圖D的設(shè)計很好的協(xié)調(diào)了主體圖與文案的關(guān)系，并且給人一種從遠及近的中距離縱深感。整個畫面中間對齊更能最大限度的突出主體——手機。從錘子的網(wǎng)頁設(shè)計中我們可以觀察到，這種排版方式是中間對齊，無論是橫向還是豎向。
再看幾個中間對齊的例子：
上面的設(shè)計家也是用的中間對齊方式，大寫的V視覺沖擊力非常強，而左上角的Logo信息和右下角的信息成為對角形式，讓人感覺畫面非常平衡而又穩(wěn)定。
小米2015年的新品發(fā)布會海報也采用了中間對齊的形式，讓關(guān)看者很容易的就聚焦到中間“新年禮物”的重要信息上。
下面的圖例是左右排版方式：
由此我們總結(jié)出對齊的版式的幾個特點和作用：
A、視覺聚焦；
B、強化頁面統(tǒng)一性和條理性；
C、對視覺的導(dǎo)向作用。
2.對比——讓畫面不再平凡
作為簡潔乃至極簡的設(shè)計來說，對比非常重要，對比可以讓人非?？焖俚拈喿x到重要信息，也可以讓版面的設(shè)計有節(jié)奏感，讓畫面看起來不乏味。
上面的設(shè)計是小牛N1和一加3的設(shè)計，這兩個設(shè)計是典型的左右排版。右側(cè)放商品圖片，左側(cè)排列簡單而有用的基本文案信息。而左右兩邊的圖片和文案信息的大小對比要根據(jù)商品的屬性來決定的。例如，一加手機主要體現(xiàn)手機的外型和質(zhì)感，所以放置2個占比面積較大的手機，搭配最基本的文案信息（只有手機名字、價格和購買按鈕）。
上圖是文案與商品的面積對比。
這個設(shè)計則與一加和小牛相反，文案面積很大，但是我們的視覺中心依然是手表，因為實物的照片往往會更加吸引人，這就是對比。但是還有一個對比不知道大家看出來沒有，就是文案里的對比，標題選用大而粗的字體，其他信息則放的很小，大能又快有準的看清標題的內(nèi)容，另外因為字體大小和粗細的變化讓人感覺有節(jié)奏感。
3. 有“氣質(zhì)”的留白
極簡設(shè)計里的留白非常重要，最典型的是無印良品的設(shè)計，它是把留白應(yīng)用到現(xiàn)在設(shè)計里最好的典范，但是我覺得我們中國人才是留白的“老祖宗”，國畫就是非常典型的例子。
下面我們來做個對比，我們把圖上的一些不必要的復(fù)雜背景和文案給去除。主要是讓產(chǎn)品主體和主要信息展示的更加清晰和明確。
再做更進一步的精簡，增加留白的面積，使產(chǎn)品和產(chǎn)品信息更加清晰的傳達出來。
下面是其他一些案例我們可以試著自己分析一下，注意留白不一定就是白色。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
