在这个项目中，主要任务是为旧金山最古老的玩具品牌 Jeffrey’s Toys 设计一个全新的品牌电商网站。
新电商网站最主要的目的是吸引顾客前往线下店铺选购商品，同时也希望通过快递和门店自提的方式来完善线上销售流程，拓展消费群体。
该网站需要巩固品牌核心业务价值观：传统，有趣和创意。该网站还需要通过强调其庞大的库存体量和手工精选商品来将 Jeffrey’s Toys 和其他电子商务零售商区分开。
该网站的主要业务目标包括：
能快速定位商品
每一个商品都有单独的详情页
用户能成功购买一个或多个商品
为爆款商品引流
1. 用户画像
谁才是这个网站真正的用户？当我接到这个任务的时候，客户已经绘制出了3个用户画像，每个用户画像都有特定的需求和痛点。
△ 客户绘制的三个用户画像
基于三个用户画像，我确定了该网站要满足的用户需求，同时也考虑了Jeffrey’s Toys的需求。
确定的主要需求是：
通过清晰的商品组织分类来提供流畅的电商购物体验
通过商品搜索使用户能够快速找到想要的商品
通过实用的商品推荐来体现 Jeffrey’s Toys 的专业以及庞大的库存
通过与用户建立品牌关系来树立信任
通过产品细节信息来确保用户选购合适的商品
通过商品评论来辅助用户作出消费决策并允许用户进行商品反馈
通过的下单结账流程简化购买行为并节省用户时间
2. 竞品分析
为了获得启发，我确定了3个主要竞品，特别是旧金山的精品玩具店；还有3个玩具零售市场的间接竞品。直接竞品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。间接竞品分析了 Lululemon 、Ikea 和 CVS 。竞品分析的目的是比较并找出这些电商网站的共同特征以及 Jeffrey’s Toys 能够脱颖而出的潜在机会。
竞品分析最重要的收获是了解了不同的电商网站的商品选择模块以及网站整体的布局。这些信息有助于巩固我第二阶段的研究。
△ 比较直接竞品和间接竞品的特征
2. 思维导图
在完成竞品分析之后，我把这个项目中用户的需求和客户的需求列成了长长的信息清单。之后我又通过思维导图来理清了在这个项目中用户的需求和客户的需求。思维导图帮助我将信息组织成更清晰的想法，同时在各个想法之间建立层次结构关系。
△ 用来理清信息和想法的思维导图
接下来我通过卡片分类法来构造网站的导航系统，卡片分类法是一种利用人们现有思维模型的研究技术。在构造导航系统时，我了解到94种商店中最畅销的商品库存信息。拥有如此庞大的商品库存，就很有必要通过清晰易懂的方式组织、分类库存信息，以便用户能够快速的找到他们想要的商品。
1. 卡片分类
△ 卡片分类的初期阶段
开放式卡片分类：我要求9位参与调研的用户通过他们自己觉得合理的分类规则将94种商品分类，然后给每个类别加上他们认为能够准确描述该类别的标签。这样做的目的是对于网站潜在的商品分类方式及类别名称有一个大致的了解。
封闭式卡片分类：基于开放式卡片分类的结果，我从最常见的类别标签中创建了13个预定类别。然后，我进行了封闭式的卡片分类，我邀请了20位参与调研的用户将商品逐一分类到我之前预定的13种类别中。封闭式卡片分类有助于让我在进行设计之前能够清楚判断这些类别是否符合大部分网站用户的分类逻辑。
△ 通过卡片分类得到的13种商品类别
2. 站点图
根据卡片分类以及竞品分析的结果，我绘制了网站的站点图来明确整个网站的框架结构。这是为了确保所有产品都放置在用户期望的位置，同时使购物体验更加直观。
△ 站点地图
3. 系统架构图
为了对用户将会如何浏览网站有一个全面的概述，我绘制一张系统架构图。这样做的主要目的是为了了解网站应该给用户提供什么功能以及功能拓展的广度。我还通过系统架构图来探索电商网站和实体店铺之间的联系。
△ 系统架构图演示用户将会如何浏览网站
4. 用户流程
在确定了我需要给用户提供的体验「全局」之后，我为每一个用户画像创建了不同的用户流程，通过不同的用户流程来使购物体验更加符合他们的需求。构建用户流程的目的是确定每个用户为了实现各自的预期目标经过的页面和操作步骤。这不仅能使我专注于每个用户的操作，也使我能够在设计网站的时候将功能拆分，以便给用户提供更佳的购物体验。
我绘制的第一个用户流程是关于用户画像是 Jenny 的。Jenny 最主要的目是为自己的孙子购买初级魔术玩具。Jenny 的用户流程（如下图所示）表明了她是如何搜索初级魔术玩具，以及为了成功购买她可能采取的几种不同路径。
△ Jenny 的用户流程
Debbie 和 Jenny 都希望能有一个的下单结账流程，所以很有必要在用户流程中绘制出下单结账流程。下图的用户流程显示了Debbie在选定一个特技自行车之后该如何进行结账下单。通过允许她登录自己的帐号，自动输入她的结账信息来简化她的结账下单流程。
△ Debbie 的用户流程
1. 草稿
在我整理了前期获取的所有信息之后，我就开始着手设计网站。基于之前整理出来的用户流程图，我开始绘制几个主要页面的草图，同时快速思考出几个不同的网站布局方案。之后我邀请3个用户参与了用户调研，以验证这些方案是否同时满足客户和网站用户的需求。
△ 网站首页和品类页面的初稿
2. 线框图
基于用户对草图的反馈和我个人的想法，我开始使用Figma来绘制线框图。整个过程中，根据优先级不同，优先考虑最能满足网站用户的功能。
△ 网站首页和产品详情页的线框图
1. 主页
首页我尽可能的保持简洁，避免用户进入网站时被过多的信息干扰而不知所措。
首页放置了全局导航、辅助导航和搜索栏，方便用户快捷的找到自己想要的商品。首页还放置了新品推荐，因为新品推荐能够展示品牌丰富的库存，同时能为用户提供有用的购买建议。我想通过介绍 Jeffrey’s Toys 丰富的历史来树立用户品牌联系，所以在首页我还放置了「关于我们」部分，用户点击还可跳转到具体的介绍页面查看更多关于品牌故事的信息。在页脚，我放置了其他的用户可能需要的信息。除此之外，我还将用户交流系统放在页脚，这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围。
2. 商品类别页面
当用户点击商店按钮或者是某个类别之后，用户将会前往一个列出了该类别下所有商品的商品列表页。有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具，所以页面需要一个品类筛选器，同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。除此之外，我还通过面包屑导航来方便用户定位页面位置。
△ 商品类别页线框图
3. 商品详情页
在商品详情页，我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的。
在页面下方，网站会基于当前商品给用户推荐其他相似商品。在商品详情页，产品评论区占了很大一部分，因为用户可以在产品评论区反馈商品信息，便于树立用户信任，同时用户能够通过其他用户的评论来作出更明智的购买决定。为了简化下单流程，我设计了一个购物车预览页，用户在购物车预览页可以预览商品信息，用户每次将商品加入购物车后都会出现购物车预览页，在购物车预览页面，用户可以很方便的点击「选好了」按钮而进入结账下单流程。
△ 商品详情页线框图
4. 购物车预览页
当用户点击「选好了」按钮或者是购物车按钮，用户将会进入到一个如下图所示的购物车预览页。这是结账下单流程的第一步，用户在购物车可以管理他们所选的商品，作出合适的调整。用户在下单时，可以选择到店自提或者是物流配送，设置到店自提是为了引导用户去 Jeffrey’s Toy的线下店铺，同时降低运输成本。
△ 购物车预览页线框图
5. 结帐页面
客户提供的三个用户画像的主要痛点之一就是想要有一个的结账流程，所以我得确保结账下单体验要尽可能的流畅。作为一个回头客，用户可以选择登录自己的帐号，并自动保存物流信息和支付信息。我决定在一个页面上承载全部的结账流程，这样方便用户在结账流程中任何时刻都能编辑信息。顶部的进度栏显示了下单结账流程有多少步，用户当前在哪一步以及用户还剩下多少步骤。
△ 登录页
△ 下单页
△ 订单查看页
6. 其他画面
我还创建了一些其他页面，例如订单确认页面。订单确认页面明确告知用户结账流程已经完成了，用户还能在订单确认页查看有关订单的其他信息，以供参考。
我创建了一个店铺联系页面，当用户在网站找不到想要的商品时，可以在店铺联系页面查询线下店铺商品情况以及店铺的营业时间、位置和联系电话。
除此之外我还创建了一个「关于页面」用来着重强调 Jeffrey’s Toys 与其他电商网站例如亚马逊的区别。我还在这个页面介绍了Jeffrey’s Toys 长达60年的独特历史，以增强用户对于品牌传统、有趣和创意的商业价值的印象。
△ 订单确认页
△ 联系方式页
△ 公司介绍页
7. 可用性测试
在完成线框图之后，我就开始绘制网站原型以便进行可用性测试。这使我能够评估用户将会如何与网站进行交互，也能让我评估网站是否满足了用户的基本需求。在进行UI设计之前，通过中保真原型进行可用性测试来获取潜在用户真实、关键的反馈是很有必要的，可用性测试还能巩固网站的功能需求。
我邀请了4位用户进行可用性测试，为了让他们吻合用户画像中的用户特征，我指定了三种用户场景来让他们完成测试。这三种用户场景包括：
您需要为您的女儿购买一个玩具。您会怎么查找商品并完成购买。
您可以通过什么方法知道 Jeffrey’s Toys 下个月将要举办的店铺活动。
当您在网站上没有找到您想要的玩具时，您将如何查询并购买。
这些是我通过可用性测试得到的用户反馈：
总体而言，用户能够轻松地找到想要的产品和信息
在结账流程中，促销活动部分会分散用户的注意力
部分用户不想通过电话来查询商品信息，需要提供其他的查询方式。
部分用户觉得前往线下店铺的引导部分还可以增强，目前的引导不够。
△ 可用性测试得到的反馈
8. 后续步骤
这个案例研究展现的只是电商网站设计的开端。后续我将会继续进行可用性测试，并进一步迭代我的设计。如果有更多的时间，我将会着重探索更多从网站引导用户前往线下店铺的方式。我也将会继续丰富网站页面并将Jeffrey’s Toys的视觉风格融入到网站中。下图展示了我最初设想的UI设计风格。UI设计我希望秉持简洁、创意、传统的设计理念。
△ 首页
△ 商品分类页
△ 商品详情页
本文以玩具购物网站这个小案例，清晰地记录了一个较为完整的产品设计流程。不论是设计方法，还是记录方法，都可以借鉴运用在工作、汇报和作品集上。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在经典的尼尔森十大启发式当中，「系统状态可见性」可以说是如今交互设计领域当中，最为重要的原则之一。通过向用户展现当前的状态，让用户拥有对系统的控制权，建立用户对于产品的信任感，这也是这种设计启发式的最重要的价值之一。
但是，想要做到可靠、易用，系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法，结合了不少实用的案例，希望对你有所帮助。
1.1、让用户知道自己在哪
没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。
Google 的底部导航栏设计
1.2、要经过多少步骤来完成任务
这也是一个非常基本的操作，通过展现步骤数量，帮助用户来预估完成这个过程所需要的时间。
Selecto 的调查问卷的设计
数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。
即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。
这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。
AliAli 所设计的悬停点击动画
但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的
2.1、单击点赞按钮
Spread love, not viruses ，作者 Charles Patterson
2.2、开关按钮
这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户
Switcher XLIV , 作者 Oleg Frolov
2.3、书签按钮微交互
这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加购物车微交互
在这种情况下，视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。
咖啡下单动效，作者 Nhat M. Tran
3.1、系统正忙于什么事情
当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。在用户等待的过程中，通常会实用无限加载的动效（一般使用在低于10s的操作中）：
对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候实用进度条会更好：
这些视觉反馈很大程度上降低了系统给人的不确定感。
对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。
Logo 闪屏 ，作者 Gleb Kuznetsov✈
3.2、内容加载
当用户需要时间来加载内容的时候，建议使用一种特殊的的容器「界面骨架」来展现。这种临时的内容容器不仅能够帮助用户快速地了解界面的整体框架，构建用户预期，并且能够在后台快速地加载数据，渐进式地帮用户获得信息。
内容加载，作者 Ginny Wood
这种设计方式对于移动端和桌面端的设计同样适用：
界面骨架加载动效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能帮用户意识到有新的事情正在发生。在多数时候，我们建议设计师使用微妙的动画来进行通知，因为动画效果会自然地吸引用户的注意力，人类的双眼的动态视觉其实是非常强的。
Aleksei Kipin 设计的通知动效
4.2、提示用户采取行动
在很多情况下，用户界面中会有很多地方会需要用户提交信息。比如，需要用户提交表单，或者用户创建了一个密码，但是在复杂度上不足需要修正，或者填写邮箱来订阅信息的时候，邮箱格式出错，等等。使用适当的视觉反馈总能够更加有效地将问题告知用户。
内联邮箱验证机制，作者 Derek Reynolds
让用户有掌控感，就是为用户创造更好的体验。在很多设计方案中，视觉反馈会因为种种原因被削弱了，甚至被忽略了。但是当用户在和 UI 进行交互的时候，期望度和可动性其实是高度依赖于这些动效和微交互，而这正是设计师需要设计出优秀视觉反馈效果的原因所在。
文章来源：优设 作者：Nick Babich
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着大众消费生活多元化和个性化的发展，卡通形象在当下社会的影响力变得越来越重要，它们活跃在各个文化领域中，特别是在商业中应用也越来越频繁。
在信息爆炸时代，大多数人对过量的文字信息容易产生排斥的心理，并渐渐乐于接受视觉图像形式的表达；而卡通形象由于其本身简洁的视觉形象，也成为了最理想的视觉传播符号之一。
本期分享会先从比较知名的几个卡通形象切入，然后分享过去几年我自己创作过的一些形象，希望对正在设计卡通形象或自己想创作形象的朋友有些许帮助。
先罗列几个比较有名的卡通形象
卡通形象一般分为具象动物类型和抽象类型两个方向。一提起动物类比较有名气的卡通形象（比如熊这种动物），你大概会先想到熊本熊、布朗熊、泰迪熊，还有韩国的倒霉熊……兔子类的就是兔斯基、找死兔、可妮兔、流氓兔，还有很早的兔八哥……太多太多。
熊本熊的特征比较明显，一身黑色加上两个红腮点，颜色上本身就给人很潮很时尚的感觉，体型略宽厚偏呆萌。很多女生会觉得它给人一种安全感，我的印象里它一直都是很憨厚的面瘫造型出现，特别是出现在GIF动图里大量真人穿着它的道具摔倒的画面（有了“智障熊”这个外号）比较搞笑，有点愣头愣脑。
所以设计造型上除了能让粉丝记住的特征外，更多的是对于它的性格打造成，给人总爱卖萌的印象。
流氓兔（MASHIMARO）是一只眯著眼的韩国兔子，随着无厘头文化的兴起，流氓兔调皮又带戏谑的个性通过原创者创作的网络动画形式呈现，其FLASH动画在亚洲乃至全球掀起不小的风潮。
还有监狱兔、兔斯基、兔八哥…这些耳熟能详的形象，这里不一一列举了。
以具象动物创作卡通形象既简单又挺难的，为什么简单？因为不用你去较劲脑汁再重新创造一个新的形象，具象动物（比如熊）就是那个样子。那为什么又很难？具象动物卡通形象太多了，不管你怎么去变着法儿努力画的不一样，但最后的效果可能还是会雷同，况且知名的具象动物IP形象又很多，所以不容易创作。
如何创作一个有特征的卡通形象
那么，今天主要是聊一聊我之前创作过的卡通形象当中的心得体会和一些过程稿。第一个例子是在创作浪小花时候，主要从微博品牌标志找切入点，提取LOGO的主要特征（就是图形头上的三个波浪，如下图），这也是比较能体现卡通形象与品牌之间关系的地方。
前期草图探索是比较漫长和煎熬的，（下图）这些是其中的一部分比较靠谱的草图，尽管只是三个波，但做了很多种不同的变化。比如可以像个公鸡冠一样长在头上，也可以帽子形式戴在头顶上，还可以长在后背上。
在创作形象时是先从PC端的动态表情（下图22px大小）开始的，也就是先从主要使用场景着手，所以做出来的表情利用好有限的展示活动区域，头身比例控制好，既要考虑形象的完整性，又要考虑动作展示能够看得最清楚，还要能突出这个不一样的品牌特征（脑袋上那三个波），这也是一个非常具有挑战性的案例。
到了手机移动端里，表情基本上是把PC上的表情一部分移植过去，不改变比例和动作情况下，尽可能丰富设计的细节。
这里要提的是形象颜色的选择，考虑要最贴近用户，不用微博那么重的红色，由于表情是最开始是用在PC网页版微博文字里，颜色太重就会看来视觉比较突兀，所以选了一个跟人的肤色很近的肉粉色（有点像小婴儿），这样表情用起来就比较具有亲和感。
而在设计微小米的时候选用了LOGO本身的颜色大红色，由于使用场景是手机端聊天对话里（下图），感觉不会那么影响阅读（其实我个人很喜欢这个红色，给人很喜庆的感觉）。
（下图）在确定这个形象之前的一些探索草图这里也发出来，而且这一次创作了三个形象，包括一个白胖子和一只小鸡，（有参考了Line的形象）希望能出一个小家族，这样后期延展运用也能玩起来。
在创作这个形象前，尝试了很多不同的形象（上图），最后采用了这个大红口袋娃娃：脸和身子是连在一起的，也看不到脖子，所以这个形象的特点也就在这里。另外，头上加了一个小揪儿。
（上图）这个是优化前的样子（头上是圆圆的揪儿），为了制作动态GIF时，让头上的小揪儿动起来更带感，就改成了（下图）这个样子，跳起来可以一甩一甩的。
在进行卡通形象提案之前，如果能花点心思做一个小小的场景（下图）也能给自己的方案加分。
每个形象都尝试一些动作变化，这样它们各自的性格就很容易把握了。比如，我会觉得（下图）红框那个表情延伸感觉很猥琐，不太适合这个形象，所以后面的表情延展尽量让微小米表现得更萌一些，避开这种很猥琐的感觉。(当然这些说起来都比较偏个人感受，只有作者自己可以体会到）
把这几个形象性格先摸透很有必要（来一张定妆的全家福）。
我个人比较满意（下图）这一组系列的扁平化风格，没有描线的感觉确实更轻快，偏小清新。
下面是几组自己平时的创作，也是利用业余时间创作的几个形象，我会思考如何抓取每一个形象不一样的特征？于是，这些特征可能是发型的变化，可能是眼睛的变化，也可能是衣着的变化……
这些不一样的变化都是让这个形象看起来与众不同，让人先记住它，但最打动人的还是这个形象能否跟看到它的人产生互动和共鸣……这也是这个形象的灵魂和存在的意义。
这一个形象的创意点是借用大家都熟知的“小红帽”这个经典童话造型，让这个小人长着胡子，名字和形象就会形成一个心理和视觉的反差。
将自恋、贪吃、自大、邋遢……这些小人物的缺点赋予这个形象，这样一个活脱脱的“小屌丝”的形象可能就会给人很深的记忆。
毕竟生活中大部分人都有着这样那样的缺点，但都希望摆脱囧态，让自己变好的那分励志感。
我很喜欢画一些丑乖的东西，现在大家都审美疲劳了，可爱的东西都乏味了，反而更喜欢一些丑的可爱的形象。那么给这些形象加个厚嘴唇、小胡子什么的，反而很容易出效果。
好了，写到这里……下面的图大家自己发现亮点，自己感受脑补吧……总之，创作形象时还是要抓住大众的心理软肋，先打动自己再去感染别人。
在画卡通形象时候，我们往往很容易陷入两个难以跳出的区域：一个是容易画得偏低幼、低龄化；另一个就是表情动作偏呆板国企风。这是受我们从小周围接收的图像信息影响的，在还没有将练习探索的草图量形成一个质的提升之前，先有这种意识也很重要，这种意识会帮助你在以后摸索练习的时候注意到形象的头身比例，以及思路惯性的打破。
欢迎对品牌、插画和卡通形象感兴趣的朋友可以一起讨论、练习。
文章来源：我们的设计日记（ID：helloskys）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为一名专业的设计师，版面设计能力直接影响到该设计师水平。我们很多设计朋友在临摹的优秀作品中，往往只是被作品华丽的外表吸引了，比较少去思考设计背后的秘密。
那么在这里，我总结了版式设计原理的几个方面，结合一些具体例子实际操作演示，让对这块不熟悉的设计师朋友们能快速掌握版式设计。
目录
一、版式组成
主体：视觉焦点，主导着整个设计（可以是人/物/文字/图片），整个版面最吸引人的部分，相当于主角的作用。
文案：对主体的辅助说明或引导，毕竟有时候我们放一只小狐狸在旁边，用户也不能准确的知道它在说什么，配角的作用。推荐阅读：平面广告的版式风格与创新！
点缀元素：装饰元素，可有可无，具体根据版面需要；好的点缀元素能够渲染气氛，大部分的点缀元素遵循三角形原则，类似下图中的云朵，群演的作用。
背景：可分为纯色/彩色肌理/图片/图形等。
二、构图平衡
在设计中，平衡是实现统一的一条重要途径。如果上面所说的元素组合起来处于平衡状态，那么这个设计看起来就是统一的，就会给人一种整体印象。
因此，平衡是视觉传达设计的一个重要方面。版式平衡总共有3种分类，分别是：对称平衡，非对称平衡和整体平衡。
1. 对称平衡
对称是同等同量的平衡，对称式设计是一种静态的，可预见的，讲究条理和平衡布局的设计。对称构图相对比较易于创建，特点是稳定，庄严，整齐，安宁，沉静和古典。
2. 非对称平衡
非对称在不对等的元素间创设出秩序和平衡，非对称设计由于版式不可预见，所以空间是变化的。特点是动态的，灵活的和富有活力。非对称构图比较多，常见的有以下6种形式。
对角线构图：
文案摆放在版面的对角线方向，一方面避免了司空见惯的居中版面，一方面给中心主体留出了更多的创作空间；另外中心的图形也可以是对角线的设计，这样会让整个构图看起来比较平衡。
发射状构图：
点缀元素围绕中心的文案或者图形发射，这样的构图会让中心的视觉容易聚焦，视觉冲击感会更强烈。
像电商大促活动，淘宝和京东等等会经常使用发射性构图来营造大促活动的热闹火烈程度。
中心构图：
这是我们最常见的构图之一，文案和主体居中页面，注意的是位于版心的主体要尽可能的出彩，利用设计技巧吸引读者的眼光，这样才能避免平淡乏味。
s形构图：
文案或者图形放在线条转折的地方，整体呈一个 s 形。另外线条的起点和重点也同样是读者容易关注的地方，可以放一些重要的信息。这样的构图灵活，有趣，而且可以引导用户沿着 s 形轨迹阅读信息。
二分构图：
文案和主体分开，呈左右或者上下的构图形式，注意的是文案要采用对齐原则。这样的构图也是比较容易创建的。
形状构图：
主体和文案组合的形式可以是圆形，三角形，矩形等形状构图。注意如果是用三角形构图，最好呈倒金字塔结构，这样更加轻易引导用户进入下一个信息层。
3. 整体平衡（满版平衡）
整体平衡，是指图片充满整个版面，文案布局在上下，左右，中部的位置，特点是主要以图像为诉求，视觉传达直观而强烈。满版型构图，给人大方，舒展的感觉。
注意：在设计的过程中，这种类型的文字处理很容易显得「嘈杂」，因此为了避免拥挤的空间，适当删减些文字。
三、设计原则
对构图形式了解后，我们还要知道一些基本的设计原则，虽然这些原则我们可以在其他地方反复的看到，但是我在这里还是要强调一遍，因为它可以帮助我们在打破规则之前，必须清楚规则是什么。另外注意一点就是，这几个原则不是独立分开的，而是可以同时考虑和结合，不是唯一选择：
1. 对比
缺乏对比，作品会变得平淡乏味并且不能有效地传递信息。艾美奖设计师、Blind 公司创始人 Chris Do 说过 contrast is king（对比至上），运用好对比，可以在页面上引导用户的视觉，并且制造焦点。
一般产生对比的方法可以有：大小对比、粗细对比、冷暖色对比……不管是哪种对比，当你期望对比效果有效的话，需要大胆一些，明显一些，不要拿12号和13的文字做大小对比，这是没有任何意义的，不要畏畏缩缩，做设计也是一样。
2. 对齐
任何元素都不能在版面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素，尽管它们可能距离比较远。需要注意的地方是避免同时使用多种对齐方式。
左边的海报采用了矩形构图，右边的海报采用了二分构图，但是文案都是找到了一条明确清晰的对齐线，这样让版面产生了秩序美。
3. 亲密性
同类相近，异类相远，相关的元素距离靠近，归组在一起，成为一个视觉单位，而不是多个孤立分散的状态，这样有助于组织信息，减少混乱，让结构变得更清晰。根据文案内容，进行合理的分组与归类。
左边海报文案分成了4组，清晰有条理，中心的主体和点缀元素也利用了亲密性原则，使得中心主体显得更饱满；右边海报主体采用了发射构图，整体呈倒置的金字塔形式，这种锥形容易引导用户阅读下一个信息层。
4. 重复
重复的目的是统一，并增强视觉效果。比如标题都是同一个字体或大小或粗细。但需要注意的是，要避免太多地重复一个元素，重复太多只会让人讨厌，要注意重复的「度」。太多的重复会混淆重点，都是重点等于没有重点。一般来说，呈均匀的重复式图案，是作为背景使用的。
左边海报中，我们的视线会被那一个不同的女孩吸引住，这个女孩和左上角的文案「敏感词万岁」相呼应，这种同质中的不同，即是变异元素，用来制作视觉焦点。
右边海报是葛西熏设计师为日本著名仲条正义设计的个人展海报，其中重复的形象是一个腮帮鼓起的小孩形象，不知道是在喝东西还是吐东西，这个具有冲击感的形象其实和这次展览主题「饮&呕吐」呼应的，设计师想表达仲条正义的创作于人生，正如这个重复的形象，不断吸收，不断推翻，最后不断创造。
5. 留白
留白是虚实空间对比的作用。适当的留白能让页面透气，有呼吸，给人舒适感。大量视觉信息堆砌时，每个元素都要经过眼睛扫描，大脑处理，当找不到重点的时候用户眼睛和大脑容易疲惫。在内容比较多的情况下，尽量在视觉上减少视觉分组；另外，多利用负空间创作一些巧妙的负空间。
左边在留白的同时，利用了负空间巧妙的将海报的主题「美食」和「美酒」结合起来。右边的海报是日本大师原研哉的设计作品，大量的留白空间更加显得中间寿司的精致，少而静的视觉元素提升了作品的品质感。
6. 变化
一成不变的元素会容易乏味无趣，版面也缺乏灵活感，如果将一些元素发生位置，大小或者颜色变化，打破版面呆板、平淡的格局，使得画面非常有层次感，不失为打破格局的好方法。
左边的海报如果将所有的元素归位，这将是一个文案和人物分开中规中距的构图，当他们的位置发生了一些位移，整个页面变得有趣多了。右边海报采用了 s 形构图，如果这些圆圈是一样的大小、颜色，可能没有多少人会有耐心的阅读下去。
四、设计流程
前面我们了解了版式组成的元素，构图和设计原则，那么我们在工作中怎么利用起来呢，下面介绍我自己的设计流程，每个人的流程都不一样，大家都可以根据自己的习惯来调整。
1. 需求沟通，确认主题
当接到需求的时候，第一步不要着急马上开工。先要找对需求的方向，才能提高工作效率，事半功倍。沟通主要注意几个方面：
需求的目的是什么？目标用户是谁？背景是什么？——对症下药
这么多文案或者素材里面，哪个是一级二级?——划分信息层级，寻找重点
风格上面有什么要求或建议？能否用3个关键词表达？——预期效果是否达成一致
Ps：关于第3步风格沟通，建议双方用图片交流和表达。毕竟每个人对「高大上」的理解都是不一样的，有的人认为是五彩斑斓的黑，有人认为是大量的留白。有了图片，我们可以去分析图片符合「高大上」的原因是哪些，从而提炼出具体的元素，将「感觉」具体化，这里也是运用到了情绪板设计的体系。
2. 确定构图形式，学会视线引导
根据前面的沟通和风格关键词，收集好用于表达信息的元素，包括图形图像文字等等，然后在草稿或者脑海中构思好，怎样的排布能让信息有效的传达出去。另外作为设计师要学会引导用户的阅读视线。比如你找到了一个抬头向上看的模特，你可以把文案放在海报上方，用户会习惯性地自然地沿着模特的视线看到文案。
3. 色彩搭配，5种平衡关系
关于配色，在网上大家都可以看到很多方法和理论，下面介绍这5种色彩平衡的方法个人觉得比较实用，也比较容易理解，大家要根据实际需求来运用合适的配色方案。
互补色——相互衬托
互补色就是色环上相对的两个颜色，海报中的绿色和红色就是这种关系，相互映衬，相互衬托，从而达到了一种平衡。
冷暖色——情感表达
当我们想表达强烈的情感时候，可以用冷暖色去对比，经常会在电影海报或者插画作品中看到。
深浅色——色彩层次
这里的深浅指的是黑白灰对比的重和轻，一般来说，色大而深显得比较重要，色小而浅显得比较次要，我们可以看一下前面讲构图那块展示的海报黑白版，会发现这个规律更加明显。
中性色和彩色——视觉聚焦
中性色指的是黑色，白色和灰色，也叫无彩色，当中性色充当背景色的时候，彩色部分会更加突出和聚焦。
纯色和花色——平衡多色关系
如果一张图中，主体本身颜色比较丰富鲜艳，背景色也五颜六色的话就眼花缭乱了，也就是经常说的辣眼睛，这时候一般采用纯色的背景来缓解视觉疲劳和平衡多色之间的关系。
4. 确定字体搭配
不同的字体有不同的气质，根据风格来选择合适的字体。如果遇到比较好看的字体，却不知道叫什么名字，可以找一些以图搜字的网站，比如求字网等等，避免伸手党。
黑体
工业现代感比较强的无衬线字体，给人感觉端正刚硬，具有力量感，多用于表达简洁或信赖感的主题。
宋体
细致优雅的衬线字体、苗条细长，特点是复古，多用于表达文艺或者时尚的主题。
圆体
圆体的笔画圆润，柔美，可爱，具有亲和力，多用于女性或儿童的主题领域。
书法体
书法体特点是潇洒大方，气势磅礴，具有历史感，多用于表达传统文化或者历史主题。
哥特体
哥特体是装饰性比较强的衬线字体，线条交接处和末端具有明显的粗细变化和装饰。特点是犀利、凌厉，多用于表达惊悚、魔法童话或者战争的主题。
艺术体
艺术体其实是泛指像素风格，手写字体，汉仪六字简等等具有强烈的艺术风格和设计感的字体。特点是轻松活泼，具有观赏性和趣味性。
五、案例演示
上面的案例大部分是平面展览或者电影海报，那么实际工作中的网页，banner、闪屏或者 ui 界面这些怎么办呢？其实方法都是一样的，版面设计的原理应用在各个方面。这里演示一个移动端 banner 设计案例吧。
首先，运营小姐姐的文案非常简洁，没有冗长到让我要分成一级二级三级；其次需求的目的也很明确，就是要突出2个素材和按钮；最后风格也没有奇奇怪怪的提议，只要和产品整体调性一致就好。
那么在这里要介绍一下产品的背景了，pins 是一款少女心拼图 app，界面简洁清新，多种布局模板和背景。很快的，我在脑海中简单地构思了一下构图的方式。其实3种构图形式都是可以的，但是为了更好的突出按钮和素材效果，我最后选择了对角线构图。
先在黑白稿的情况下把文案和主体布局好，让主次关系清晰；考虑到目标用户大部分是女生，使用了圆形字体，配色主要是参考了 pins 的 logo 的配色，少女心的品牌色；最后细节调整，加上一些点缀的元素，其中网格是 pins 比较受欢迎的背景。一个简单的 banner 就这样完成了。
当我们的工作内容无法满足做文字比较多的平面海报的欲望时，可以考虑自命题的练习。当时听到许巍《无人知晓》这首新歌的时候，有一些感悟和想法然后做了一些 C4d 素材，想利用它作为主体和歌名做一下排版练习：
在开始动手做之前我就想好了这次想做一个视觉直观而强烈的海报，再加上主体是文案和素材的结合，所以我才采用了满版构图。在黑白灰中将主角和配角的位置确定好，再去调整字体和距离。推荐阅读：版式必备的7招处理方法
然后调整主体中4个字和素材之前的交叉和重叠，细节调整后，我尝试了2个配色方案，一种是利用主体素材的颜色进行搭配，平静和谐；另外一种是红蓝配色，直观强烈。
总结
最后总结一下，我们在进行版面设计时候，要注意从这几个方面去不断调整和检查，同样当你看到一张海报的时候不知道怎么去思考和分析，也可以从这几个方面入手：
主题是否鲜明？视觉焦点是否突出？
构图是否平衡？（3种平衡关系）
设计原则是否合理运用？（6个设计原则）
细节是否丰富? 是否有趣? 细节考验着设计师的情怀。（字体、色彩、光影等）
以上海报案例图片采编于网络，版权归属原作者。
来源：UID的小伙伴们
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这是 UI 设计师 Diana Malewicz 的一篇 UI 界面设计的分享。怎样在保证基本的可用性和易用性的同时，让界面柔和、富有亲和力？如何在让用户愉悦的同时，还能用设计取悦自己？Diana 的方法谈不上有多神奇，但是让人眼前一亮，值得借鉴。
真的关注趋势变化，你会清晰的感受到，视觉效果和设计技巧一直在变……它们一直是设计师们的话题中心。但是这篇文章并不打算讨论这个事儿，无论渐变是否流行，新拟物化的可访问性是否不足，都不在今天的讨论范围内。
对于各种风格、方法，我的观点始终是：做出来的设计要可用，有用，有良好的可访问性，用户可以轻松理解，就行了。不过，我更乐于从趋势中获得乐趣，而不是将它视作为约束，如果每个界面看起来都是一样的，那该是一件多么无聊的事情啊。
关键在于，要让产品的视觉样式和你的用户群体匹配起来。
我个人非常喜欢漂亮的渐变和微妙的阴影，这样的设计常常显得魅力非凡。这种自然的过渡和光影的变化，非常贴合我们对于现实世界的感知，这就是为什么这样的设计能够俘获大量没有技术背景的用户的心——因为它们看起来友好，并且易于理解。
在这篇文章当中，我将分享如何将 UI 效果设计得出彩又友好，让视觉效果柔和又让人感觉舒适。本文围绕着一个「面向年轻人的金融 APP」虚拟设计项目来进行展示。
下面我们开始吧！
怎么让我们的设计看起来柔和圆润呢？下面开始准备工作：
1、选择想要使用的配色（想想使用柔和的粉彩构成的背景主色调，搭配一个给人精致感的次要色，以及一个抓人注意力的强调色。）
2、选择合理的字体（我用的是 Brandon Grotesque，这是我最喜欢的字体，它足够友好，能够营造有趣的氛围，且具有良好的可读性）。接下来，给字体设计不同大小和字重（最好不超过5种不同的样式）。其中，标题字体应该较大，正文字体较小，最小的字体用于细节呈现。注意，尽量不要在长句子里面使用全大写。
3、确定你所需要的阴影的高程（Height）和模糊度。
4、如果使用的是图标，确定使用填充样式还是描边样式。尽量不要混用。
至此，一个小型的设计系统就已经确定了。挺好看的！
不管是平面设计、品牌设计，还是UI设计，配色都是一个基础，决定着作品的视觉效果。这篇文章就从色相、纯度、明度（色彩的三大属性）三个角度，展开谈谈色彩的搭配。
随着时间的发展，现在基本上人手一部手机的低头族。做为前端开发的程序猿，在开发移动端web应用的时候，对面一堆各色尺寸不一样的屏幕，就有点淡淡的忧伤。
以上是2018年二月份的友盟数据，可在这里查看详情
很明显我们所要实现的就是在上述如此之多的屏幕,都能实现UI大大出的视觉图上的效果。而要实现这样的效果主要有两个难点
各屏幕适配各屏幕的适配，有两种方案，flexible + rem 与 vw。这三个单词是什么意思，看着很眼熟，但是这两个方案居然是什么呢,请允许我细细道来。
flexible + rem显而易见,该方案是由rem 以及 flexible组成的。rem （font size of the root element）相对于根元素(即html元素)font-size计算值的倍数,flexible 即 flexible.js, 手淘团队提供的一个为该方案屏幕适配而写的一个库,主要实现的功能就是，根据屏幕的宽度给 html 元素设置一个合适的 font-size 值。
怎么样看的不是很懂是吧。让我来用一个页面场景再复述一遍。
正常情况下，我们的UI大大会以iphone6的尺寸为标准，做一套视觉效果图，并在上面进行标注，给到我们的标注图，如下所示
拿到这个图 我们该如何下手呢
到这里为止是不是就结束了呢 ? 很遗憾的告诉你并不是。为什么 html 元素的 font-size 要设置为 37.5px呢？现在这个界面在iphone6上能完美显示了，在iphone5s,iphone6p能完美显示吗？（iphone6, iphone6s, iphone7. iphone8屏幕没有发生变化，本文直接用iphone6代替了。）上面的两个问题 我们还有没解决，这个时候就轮到flexible登场了。只需要像如下引入就可实现用js来自动根据屏幕宽度设置 html元素的font-size的值。
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>引申一下在上述过程中，你会发现，UI给到我们的一般是px标注的图，我们将其转化为rem，这个过程其实会花费很大的计算时间。做为一个合格的程序员，我们应该把这种机械性无脑的操作交给计算机来实现。我使用的是PostCss的插件 postcss-px2rem,这个插件能让我们在写代码时候直接写px，在构建的时候自动将我们所写的px转换为rem，大大提升了我们的开发效率。
vw这个vw的方案，相当而言还比较新。vw 即（viewport width）可视窗口的宽度。之所以把这个方案放在后面来说，是因为viewport在去年（2017年）的时候存在不少的兼容性问题，各个浏览器的支持并不是很好。但是来到了2018年这个时间点，viewport单位意见得到了众多浏览器的支持（80.45%）。
可以在这里查看。
接下来就让我们来正式了解下这个方案吧。vw既然是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。举个例子，再次以iphone6手机为例，100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到这里为止是不是就结束了呢? 是的就是这么简单。
引申一下跟之前一样的痛点，我们仍然需要花费大量不必要的计算时间去把标注图中的px转换为vw，有没有类似于postcss-px2rem的工具呢？很荣幸能再次站在巨人的肩膀上，已经有大神写了了类似的PostCss插件 postcss-px-to-viewport
1px问题移动端的屏幕不仅仅分辨率有差异，其实还有Retina屏的问题。正常情况下，我们代码里的1px在屏幕上就应该显示一个像素点，但是在Retina屏下则不仅仅是一个像素点。再次拿iphone6为例，其dpr(device pixel ratio)设备像素比为2，css中一个1x1的点，其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px，在iPhone6 Plus下甚至会显示成3px。
这样的话，我们就会发现在有些手机上1px明显跟另外的一些手机的1px粗细不一样。其实大多数的小公司不会扣这样的一个细节，比如说我们公司不会。(^__^) 嘻嘻……
但是作为一个有追求的前端工程师，我们应该尽量的把事情做的完美一点，（ps.像大公司看齐，在大公司这个细节问题其实是不容忽视的，为了自己以后的发展前途，我们有必要把这个细节完善掉的。）
这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}编译出来就是
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;}其他小程序中的屏幕适配最近在写小程序，在小程序里，使用的是小程序的那套，跟平时用的vue全家桶以及react全家桶不一样，并没有配置webpack，在这种情况下我们使用postcss其实很困难（反正我是搞不出来/(ㄒoㄒ)/~~）
那该怎么办呢，小程序提供了一个自己的单位, rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备
iPhone5
iPhone6
iPhone6p
我们直接用拿到iphone6的标注图，直接写rpx就好。
出处：https://www.cnblogs.com/pengdai
二、S单一职责SRP
1、定义
2、原则分析
3、优点
4、例子
三、O开放封闭原则OCP
1、定义
2、原则分析
3、例子
四、L里氏替换原则LSP
1、定义
2、原则分析
里氏代换原则是实现开闭原则的重要方式之一，由于使用基类对象的地方都可以使用子类对象，因此在程序中尽量使用基类类型来对对象进行定义，而在运行时再确定其子类类型，用子类对象来替换父类对象。
五、I接口隔离法则
1、定义
2、原则分析：
六、D依赖倒置原则DIP
1、定义
2、原则分析
3、例子1
[img]https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ ... rFZQ/640?wx_fmt=png[/img]
七、合成/聚合复用原则
1、定义
2、原则分析
八、迪米特法则
1、定义
2、法则分析
5、例子
九、Q&A1、面向对象设计其他原则？
2、你能解释一下里氏替换原则吗?
3、什么情况下会违反迪米特法则？为什么会有这个问题？
4、给我一个符合开闭原则的设计模式的例子？
5、什么时候使用享元模式（蝇量模式）？
移动端推广速度快，效果好，越来越多的企业，商家开始重视移动站的建设和移动页面（h5）的制作。随着移动页面的玩法越来越多，对前端技术的要求也会越来越高。
关于移动设备一些基本概念的理解。
网站示例
网址：https://github.com/amfe/lib-flexible；
蓝蓝设计的小编 http://www.lanlanwork.com