火星网校
电商UI设计之极致的版式
发布时间：2024-01-23 18:28:29 浏览量：211次
写在前面：
电子商务经过了几年的发展已经逐渐成熟，并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而这两年各个电商公司已经非常重视设计了，而且设计风格也逐步走向简洁乃至极简的风格。这种变化是随着电商的不断发展，更加重视产品的品质而进化的。
下面从3个方面来讲一下如何做极简的设计，每个里面都有一些具体的知识点。
先看一下极简设计的案例：
这是锤子T1的页面设计，虽然好多人都不喜欢老罗，但是我觉得他有对设计特有的一种完美主义的偏执，无论是手机的外型（各种对称）还是系统UI的设计，我觉得作为设计师我还应该多向他学习一下。回到页面设计本身，我们来分析一下这个页面的设计。
一、极致的版式
可能大家开始画画的时候就接触和学习构图了，而构图就是版式设计的基础。但我们往往忽略了对于构图和版式的极致追求，一般我们总会说，差不多看着舒服就行，可是对于设计师的能力晋升我们还需要更加重视版式的设计。
下面是几个版式设计的技巧：
1.对齐——最基础但也最重要
上面图A、B、C是对页面重新排版，图D是原有的设计。虽然总体看起来都还可以，但是我们仍然可以很直观的看出来，图A的构图有些头重脚轻，让人感觉中心偏下；图B的手机主体物有种对文案的挤压感，让人觉得压抑；图C的手机和文案成为90°的夹角，让人觉得有种阻碍感，不顺滑；图D的设计很好的协调了主体图与文案的关系，并且给人一种从远及近的中距离纵深感。整个画面中间对齐更能最大限度的突出主体——手机。从锤子的网页设计中我们可以观察到，这种排版方式是中间对齐，无论是横向还是竖向。
再看几个中间对齐的例子：
上面的设计家也是用的中间对齐方式，大写的V视觉冲击力非常强，而左上角的Logo信息和右下角的信息成为对角形式，让人感觉画面非常平衡而又稳定。
小米2015年的新品发布会海报也采用了中间对齐的形式，让关看者很容易的就聚焦到中间“新年礼物”的重要信息上。
下面的图例是左右排版方式：
由此我们总结出对齐的版式的几个特点和作用：
A、视觉聚焦；
B、强化页面统一性和条理性；
C、对视觉的导向作用。
2.对比——让画面不再平凡
作为简洁乃至极简的设计来说，对比非常重要，对比可以让人非常快速的阅读到重要信息，也可以让版面的设计有节奏感，让画面看起来不乏味。
上面的设计是小牛N1和一加3的设计，这两个设计是典型的左右排版。右侧放商品图片，左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要根据商品的属性来决定的。例如，一加手机主要体现手机的外型和质感，所以放置2个占比面积较大的手机，搭配最基本的文案信息（只有手机名字、价格和购买按钮）。
上图是文案与商品的面积对比。
这个设计则与一加和小牛相反，文案面积很大，但是我们的视觉中心依然是手表，因为实物的照片往往会更加吸引人，这就是对比。但是还有一个对比不知道大家看出来没有，就是文案里的对比，标题选用大而粗的字体，其他信息则放的很小，大能又快有准的看清标题的内容，另外因为字体大小和粗细的变化让人感觉有节奏感。
3. 有“气质”的留白
极简设计里的留白非常重要，最典型的是无印良品的设计，它是把留白应用到现在设计里最好的典范，但是我觉得我们中国人才是留白的“老祖宗”，国画就是非常典型的例子。
下面我们来做个对比，我们把图上的一些不必要的复杂背景和文案给去除。主要是让产品主体和主要信息展示的更加清晰和明确。
再做更进一步的精简，增加留白的面积，使产品和产品信息更加清晰的传达出来。
下面是其他一些案例我们可以试着自己分析一下，注意留白不一定就是白色。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
