如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
01-
肖形图形-构成规律：A组成B
肖形图形就是以单一元素或多个元素的外形共同变化来进行一个新形象的创造并使两者之间的含义得以连接。如果两个物体同时改变了原先的形态，并在这两种形态间产生了一种全新且严谨的契合关系，一个新形象也就诞生了。
还记得08年奥运期间的各地景观吗？你去看城市市民广场的花坛，从南到北，无不例外，用鲜花组成一个大大的奥运五环的图形，要不然就是京的印章标志，或者就是北京欢迎你的字样。印象最深刻的就是开幕式用击缶来形成倒计时的数字。
肖形图形概念是运用十分广泛的一种创意概念，它好理解，上手快。但不能理解成一个简单的重复罗列的过程，哪些图形可以结合构成新的意向？怎么组合更加有趣？怎么控制好元素之间的疏密关系？
当我们面对两个形态上看似没有什么关联的物件时，不妨先从点、线、面、空间这些角度来解析一下，或是再换个角度看，每个物件都可分解成基本的方形、圆形和三角形，这些隐秘的关系都为它们的解析重组提供了可塑的条件。
点的创意表现
在图形中，任何一个单独而细小的形象都可以称为点。点是以视觉中面积大小的感受来确定的，所以点的形状并不一定是圆，也可以是其他的几何形体，点是相对于线和面而存在的视觉元素。在设计中，点的排列的形状、方向、大小、位置、聚焦、发散，能够给人带来不同的心理感受和视觉冲击。点的构成可分为密集和分散两种不同的视觉类型。
线的创意表现
线是创意图形的基本要素之一，线可以串联各种视觉要素，可以分割画面和图像文字，可以使画面充满动感，也可以在上稳定画面。线与线之间的排列可以使画面具有节奏感，线的放射、粗细、渐变排列可以体现三维空间的感觉。
线的编排构成分为有节奏、有情感、有空间关系等的线。每条线都有自己独特的情感存在，将不同的线有节奏地编排在板式中就能形成各种不同的效果。作品通过线的空间处理，利用独特的视觉效果，能表现强烈的整体感和形式感。
面的创意表现
图形设计中的面由于轮廓的作用，使形态从周围空间中突显出来，从而比点、线的视觉冲击力更大。在进行面的创意表现时，要考虑形状与面积的对比、间隔与面积的对比、面积与面积的对比等因素。面是视觉元素创意的基础，可以运用不同的方式来表现。
02-
同构图形-构成规律：A+B组合
同构图形更注重于体现视觉意义上的艺术性和完整性，通过变形、错位、结合等种种手段来制造出虚拟的物象。同构可以理解为是一种形态上的置换行为，即是将组成某物件的其中一部分特定元素与另一种本不属于其自身却具备形态上相似之处的元素进行巧妙替换，相互借用，同生共荣，形成新的异象，产生出新的寓意和独特的视觉趣味。
同构图形在设计运用中最为广泛的一种图形概念，但在运用时我们必须注意做到自然巧妙而不生硬。如果总是一味的将一堆相关元素胡乱堆砌在画面中，这样的画面，细看之下实在是索然无味啊。
(一半写实一半创意)
一个完整的元素一分为二，一半保持元素原来的固有形态让用户保持认知，另一半就可以进行创意设计。案例一中是用直白的文案直接进入主体，使用手写字体切近用户的同时也彰写了格调；案例二中为了体现科技感，运用了电路板进行内部重新构造，增加科技感的同时也不失可爱。
(图形加文字)
图形加文字，通过提取文案，在图形设计中保留主要的重点文案，很明确的传达品牌的内涵，文字在图形中也尽量按照图形的走势进行排列。案例中的文案都传达了一种积极向上永不服输的态度，运动员们也为了胜利而拼搏，体现的耐克的品牌文化。
(双重曝光)
双重曝光从严格意义上讲不属于同构图形的一种，但是它也是同构两张图片两两相合成形成的一种特有的风格，由于这种风格也算大热的风格。我们在制作双重曝光的时候尽可能的保证人物形态的完整性，如上图的案例中双重曝光的画面很清晰，主次也很分明，很好的保留了人物的五官的完整性。
(APP节日闪屏)
(点)
(线)
(面)
(创意)
(插画)
作为UI或者产品设计师，我们在设计界面中会很少运用肖形图形和同构图形进行区创意。但是在APP闪屏页中，我们就可以很好的运用的肖形图形和同构图形。可以很好的与品牌LOGO图形相结合，更好的为品牌宣传去服务。在这方面做的最好的当属QQ音乐这款产品，它很好的利用品牌图形与点、线、面、插画相结合进行创意，很好的体现了节日的主题和氛围。
总结-
肖形图形和同构图形在设计中运用广泛，通过图形创意练习可以增加我们创意思维，也可以锻炼设计总的主次层级、疏密远近的关系。相对复杂的视觉图形元素能处理得当，相信在界面排版中也能很好的分析出层级和层次之间的关系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在 MIUI 10 的内测反馈中，设计上的耳目一新是众口称赞的部分。近日，MIUI设计总监 Gary 和几位核心设计师一起接受了我们的采访，开诚布公地介绍了 MIUI10 设计背后的故事。这次的采访我们聊得很细，细到某一个交互的设计思路的变迁，以及为什么最终是以那种方式呈现在 MIUI 10 之上。我相信，无论你是对设计还是对手机系统存在好奇，一定都可以从这次访谈里得到一些有益的启发。因为我们没聊虚的。
△ MIUI设计团队
△ 虚拟键不该存在
是不是太激进我们还是根据用户反馈来判断，这套手势因为没有任何虚拟键的提示，刚开始确实需要一两分钟来学习，但大部分的用户反馈是：用了就回不去了。目前从客观上来讲，安卓手机里的全面屏手势，MIUI 确实是最好用的，不是我们自己说，而是从各种用户反馈，包括微博上很多专业数码博主的反馈得来的结论，很多人在主动地说这件事。
但是在手势的设计上，我们是踩过很多坑的。
我们尝试过很多版本的全面屏手势，最初还没有大胆到想干掉所有虚拟键，而是想在虚拟键上做文章。开始我们觉得那个区域很多时候3个 button 可能用不上，比如看书的时候，你可能只需要一个返回键，所以我们考虑的是在某些特定的应用场景里把一些用不到的虚拟键收起来，这是做减法，减法做完之后，原来虚拟键的位置就空出来了，我们觉得这个空间是浪费的，又在想应该怎么利用起来，这是早期一个很复杂的思路。
△ 早期带横杆的产品
后来我们又想是不是可以把3个键整合成一个虚拟键，当初做了一个 Demo，把3个键集合成一个横杆，那个时候还没有看到 iPhone 的模型，在 iOS 的全面屏手势出来之前，我们就做了一个横杆子，其实是受 Palm 的启发，这根杆子很早之前 Palm 就有了，苹果可能也是受 Palm 启发。我们设计的是在那个杆子上横滑返回，然后上滑回桌面，很接近苹果目前的处理方式。但最终还是把这个设计给放弃了，去掉的原因是：提示杆一开始是有比较好的引导操作作用，但一段时间后，用户就不需要了，另外就是视觉感官上横杆并不好看，工业设计上好不容易才能把手机下巴缩短几毫米，你一根横杆又全给它加回来了，这其实背离了「全面屏」的初衷，在设计上是一种不得已而为之的妥协。
否定横杆之后，我们才真正全心考虑干掉所有虚拟键的方案。但没有虚拟键，就对我们的交互设计提出了很高的要求，首先，这个手势的出发点一定得非常符合直觉，所以不管是返回上一级菜单也好，回到桌面也好，这必须是两个最基础的操作（横滑、上滑），在这两个基础操作上略做停顿，我们就可以进入应用间的快切和多任务管理，我们用一种非常轻的设计把它附着在两个基础交互上。彻底干掉虚拟键这件事最早我们没有太大的勇气去做，最后做出来反倒更贴近用户操作手机的直觉，有一种柳暗花明的感觉。
△ 简洁易用的MIUI全面屏手势
△ 为全面屏而重新设计
在天气、日历、安全中心等等 MIUI 10 的各个角落里，其实都把原来分段式的画面结构做了一个全面屏化的设计，让页面不要有很强的割裂感。让内容直接浮在屏幕上，用户第一时间得到信息，去掉干扰元素。
在非全面屏时代，手机有上下两个比较大的黑色边框，在视觉上天然是分段式的，之前屏幕内的多色块设计其实是对应了手机外观的这种「分段」，它还是和谐的，但原样搬到全面屏手机上，就显得是把一整块完整的屏幕生生分割成了几段。
另外就是原来有一些插画类型的风格和表达手法，想让整个画面有一些亲和力。但是因为我们的用户覆盖面很大，两三亿用户，会有一些年龄层的用户觉得原先插画形式有些稚嫩感。所以我们觉得到10这一代，整个系统应该更成熟、更普适一些，我们更倾向于做一个对任何人来说都很舒服的视觉设计。
举个特别细节的例子。MIUI 10 的时钟，有一部分用户会有疑问：在 MIUI 10 里，可见的大多数页面是亮色，为什么进入时钟时却是黑色的？我们其实也在白色和黑色反复了很多次，调研也做了很多次。最终我们认为更重要的是时钟的使用场景问题，比如说你晚上在睡觉前拿起手机定个闹钟，在夜晚或者室内，从手机桌面进来打开时钟，如果进入一个很亮的页面，它即便是好看的，也可能会刺眼。所以我们还是选择了黑色，当然那个对比度到现在还在调整，我们想把视觉上的美观和使用的舒服统一进来。
我明白你这个问题的意思，大部分人的手机是长期静音的，音效这个东西，好像已经被完全忽略了。但是我们觉得，哪怕只有1%的用户打开了手机铃声，他也应该感受到悦耳而不是打扰和腻烦。如果我没记错的话，我们是手机厂商里第一个针对音效做系统性设计和优化的，我们从「百听不厌」的自然系音效出发，和得过格莱美奖的顶尖音乐人合作，还针对手机音腔的特性对音效做了特别的优化。
发布会上洪锋把自然音效系统作为一个彩蛋来讲，这是我们送给小米手机用户的一个礼物，是让我们骄傲的产品。我不确定有多少用户会发现这个产品，有些人可能因为长期静音他没有机会接触到这个新设计，但它是一个能带给人惊喜和温暖的东西。
有些人可能会觉得设计是一个偏感性的、依赖审美的东西，但是对于一个好的系统设计，我会从视觉、动效、交互、字体、音效，五个维度的去衡量它的完善程度。
我们用一个人来做类比。视觉，就是感官层面的，比如说你见到一个人会说：这个人很帅；第二就是交互层面的整体逻辑，就好比你跟他说话，发现他的脑子清楚；第三就是整个动效的层面，这个人的肢体语言很优雅；还有字体，我们是从 MIUI8 的时候就开始做了，为了让大家有更好的阅读体验，让人觉得你这个人很有涵养，这已经深入到非常细节的层面了；最后，我们加了一个声音的系统，就是你说话的时候，声音还要好听。MIUI 在设计上一直是往多个方面进化，我们并不满足于做出某个漂亮的页面或者交互，而是追求整个体验层面的饱满。
做设计过程中，我们可能会尝试各种各样的方案，也有灵光乍现的时刻，但我们会从多个维度完整地去考量这个设计成果，避免做出一些只是「看上去很美」的自嗨的东西。实际看起来、用起来、听起来怎么样，我们想从这几个大的感官维度上都能达到体验层面的满足。
举一个例子：比如说之前我们为了快去掉了一些解锁的动画，用户一按指纹解锁，直接进到桌面，这种确实是非常的快，但这种感觉就像什么呢？就像你一按电梯，门就消失了，你进了电梯，它咔一声又关上了，是很快，但是这种观感是不太好的。它没有一种欢迎的意识，就只是把东西呈现给你。这一次我们希望把这个东西改回来，当你进入手机桌面的时候，图标应该有个简短的优雅的动态，有一个进场亮相的过程。
△ MIUI动态图标
MIUI 其实已经非常流畅了，在这种地方去掉应有的动画，是可以快100毫秒，但这种快是没有意义的。让用户舒服的看到这个东西，这才是整个体验的核心。所以我们这次就定下一个目标，和工程团队一起，把这种为快而快的东西给它削弱，用户要的是更优雅的体验，而不是那种无感知的快100毫秒。
这个事情说起来不大，但其实是一种理念层面的进步，大家已经从那种无意义的纯数据比拼里解脱出来，更注意到整个体验层面。我们这次会把上面说的进场动画加进来，能让用户点亮屏幕的时候感觉到更加的舒服，能够感觉整个系统的「肢体语言」更加优雅。
之前的非全面屏时代，手机屏幕在16:9的形态下，UX设计上其实已经极度成熟。手机的很多功能和设计的出新，很大程度上都是在迎合一些小众的需求，可能一部分人觉得很喜欢这个设计，但它并不普适。
全面屏手机的出现又将设计师的注意力从这些小众需求拉回到了一个大众需求：怎么在全面屏手机上做出更好的体验。因为智能手机用户迟早会将手中的设备换成全面屏设备，手机厂商如果只是简单地把原来16:9的画面改成18:9，而不根据硬件特点做真正的深度定制，那就会离用户体验越来越远。
手机系统的未来我们认为也会是这样的趋势，软硬件的结合会更加的紧密。在这一点上，MIUI 有这个意识，也有行动，目前是走在比较前面的。
MIUI10 落版后，我们也在考虑往这个方向去深化。我们不会特意去考虑11跟10之间非得做出什么大的区别来，相比这个，我们更关心的问题是：什么是用户真正需要的设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
图表是显示大量信息的一种重要表达方式，良好的图表设计能够传达复杂的统计数据，并让用户易于理解。图表设计可以专门分出一个设计类别：信息图设计。
不过，信息图设计更多针对桌面端，很少考虑移动端，所以，移动端的图表设计挑战性更大。在小的屏幕上展示数据或信息，只能做一些取舍。
Android - 统计数据图表
Arco的图表和图表
股票应用设计
Analytics（分析）
移动仪表盘
优化 - 统计
移动UI中的图表和图形
金融应用
财经和新闻应用
支付帐单
线图页面
分析应用页面
分析应用
健康应用
自行车比赛
威胁仪表盘设计
仪表盘设计
图表
足迹App
管理模块
紫色的图表和图形
运动追踪应用
关于铁的图
Noblyn App重新设计
投资平台
跟踪应用
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
7月份的时候，有一位面粉问到了我关于统一店铺视觉风格的问题，我说等有机会了专门写篇文章做分享，因为一两句话根本就说不清。但是，今天我并不是专门只针对某个店铺做视觉统一的设计分享，而是想从全局的角度去给大家阐述这个问题，毕竟，你得知道自己为什么需要做视觉统一，你才可能做好视觉统一，所以这个问题就不单单只是指店铺了，而是关于品牌与用户之间的问题。
因为不管是店铺也好，平台也好，他们其实都是为卖货服务的，它们与品牌产品之间其实都是合作关系，最终其实都是要链接到用户身上的，而设计师要做的，归根结底都是处理好它们与用户之间的关系，帮助达成交易。
所以我将要分享的关于视觉统一的方法，就不单止是适用于店铺了，而是品牌、平台、店铺都适合的。
按照惯例，我还是先给大家列出一个提纲，方便大家理解：
接下来我就逐条展开给大家说一下这其中的奥秘吧！
当我们提到统一视觉风格这几个字，不知道大家能联想到什么？或者能联想到什么画面什么公司什么产品呢？在回答这些问题之前，我还是先给大家举一些例子也许你就明白了。
比如前几天我无意中打开了淘宝app，然后刚好看到了2018年淘宝新势力周的一系列卖场页面：
大家知道像淘宝天猫京东这样的平台，每年各种卖场促销活动是很多的，而且每一场活动都需要容纳成千上万的商家和数以万计的商品，但是，所有这些东西都却只是通过一块液晶显示屏展现在消费者面前，那么这时候就是我们设计师发挥作用的时候啦。
这时候设计师需要做的事情就包括以下几个方面：
总而言之就是要权衡平台、商家、顾客三者之间的关系和利益：顾客买的爽，商家卖的爽，平台名利双收。
那么这时候保持页面视觉统一就很有必要了，因为视觉统一就有以下非常重要的几点作用：
1. 强化品牌或事件在用户心中的印象
因为几乎所有的品牌都需要做的一件事情就是占领用户心智，就是要让用户在众多的品牌选择里有自己的一席之地，不要把自己遗忘了，所以它需要不断的出现，保持存在感。
一个活动每年去做，一个电影每年都出续集，一个产品每年都会出不同的系列等等，都是同一个道理，都是在强化自己在用户心目中的印象，保持存在感。
提到这个，我平时每次搞活动都会提醒大家不要经常换头像或微信昵称，我让大家多来留言其实就是这个道理，因为我每天要面对的那么多人的头像和名字，如果你长期不换头像并且经常来留言，那我肯定会记得你；但如果你经常换头像，并且留言次数还少，那我铁定就不记得你了，因为你没有强化一个符号在我的脑海里啊，明白了吧。
2. 让事件变得有序有规律可循
就像我们办运动会，不同的队穿不同的衣服、喊不同的口号等等，即便是队里的人走散了，你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。
再比如你去超市货架上拿饮料，正是因为这种视觉统一的作用，所以你才能很好的辨认出自己要买的品牌产品，而不至于拿错了，反过来对于品牌也一样，自己内部的产品之间是有统一的视觉形象的，同时又是跟其他品牌相区分开来的，所以才可以保证顾客不买错。
这些道理运用到页面设计上也是一样的，让顾客方便逛，同时别逛错了地方。
3. 提高相关人员的可执行性
因为像这种大型的活动，需要大量的人力投入，就拿设计师来说，一般都是某个主设计师出来一个设计方案，然后这个方案不仅要能达到以上提到的要求，还必须要是能保证其他设计师能够以这个设计方案的模版，去执行剩余的几十上百个页面，工作量非常之大。
前面我们讲到了统一视觉风格和形象的必要性和重要性，那么接下来就是大家最关心的如何统一视觉形象的问题了，所以我依旧会从好几个方面以举例的方式给大家做讲解，你就明白了。
不过在这之前，我还是拿一张图给大家看，还是淘宝新势力的这张图：
你在这个画面里看到了什么？这个视觉画面里都包含了哪些东西？
嗯，我看到了模特、文字、图案、各种颜色，还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。
那所谓统一页面的视觉风格，也就是说只要保证以上所有提到的这些东西，我在另外的页面里也至少能找到一项是类似的，那我们就很容易将它们视为是具有共通性的页面了，也就达到了视觉风格统一的目的。
以下面这几个淘宝新势力分会场的页面为例：
你应该注意到了，这些页面虽然颜色不一样，但整体看视觉却非常统一，同时细看又有些差别，其原因就在于以下几个方面：
所以你才会有这些页面具有统一的视觉风格的印象，包括其他会场的页面，虽然做了一些小调整，但是依然可以看得出来是统一的视觉风格：
因为这里运用到了跟上面同样的原理。
不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过，我这里就不深入举例了，大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会：
这种手法给人俏皮、时尚、新潮的感觉，非常适合追求趣味个性而又不失品味的心态年轻的群体，所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量，才会做这种形式的设计吧。
而且这种扁平质感半插画性质的设计形式几乎是很难过时的，非常前卫和耐看。
所以到这里你应该就好理解了，一般来说，我们有以下5个途径可以达到统一视觉风格的途径。
1. 提炼某种风格，重复使用
比如你看今天淘宝新势力的一些会场页面，视觉风格就非常统一，一眼就看出是实体模特＋手绘图形相结合的风格形式，在模特脸部做一些图案轮廓线，然后模特周围点缀一些手绘图案做氛围，有点达达主义的感觉。
2. 建立某种品牌色，重复使用
当我们重复看到某种颜色跟某个品牌或产品同时出现，时间久了就会自然而然的把这个颜色和品牌联系在一起，从而产生条件反射，只要看到某个颜色立马就会想到这个品牌，只要听到这个品牌的名字脑海里就会出现某种颜色。
这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。
比如蒂芙尼蓝：
所以，任何页面，任何场所，任何产品上只要出现了这个蒂芙尼蓝色，用户都会默认他们是相关联的：
再比如，可口可乐红：
当然了，色彩种类那么多，有的品牌或店铺的品牌色并不是单一的，而是多彩的，这都没有什么限定。
那这个如果是运用到页面设计或 Banner 设计里的话，这种品牌色是一定都需要出现在画面里的，至于色彩比例就因需要而定了，而且今后只需要出现这种颜色，就能反过来达到视觉统一的目的。
3. 提炼某种视觉元素，重复使用
所谓视觉元素，其实就是指一切你能看到的想到的元素，所以这里的视觉元素也是指多个方面的，比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。
那说到视觉元素的运用，我脑海里印象比较深刻的2个品牌就是初语和天猫，前者是店铺，后者是平台。
我们可以看看品牌升级以前的初语，它有一个让人印象非常深刻的视觉元素，就是她的模特和眼部的妆容：
所有的模特都保持了一致的妆容特点，气质也是类似的，当然你也会看到很多他的设计都是会与艺术名画相结合，这些都是它的特点，并且加以充实用，就给人建立了很深刻的印象，你只要看到这种模特妆容或者画面，你就知道：「噢没错了，这是初语」。
那天猫也是一样的，每年双十一这个天猫头的元素就会以各种形式露面，而且不止是在双十一，可以说是相当强大的视觉符号了，你想忘都忘不掉它：
2017年天猫双十一宣传海报
△ Budweiser 百威
△ GUERLAIN 娇兰
△ Beats
这种通过某种视觉符号来统一视觉形象，重复使用从而加深用户印象的方式在很多其他地方都有用到，比如每一个苹果手机，每一次开机，都会出现同样的开机画面：白底＋黑色的苹果 logo。
4. 打造品牌专属的IP或宠物形象，并重复使用
这就跟品牌给自己找了个的代言人一样的效果，只要这个形象出现了，你就知道这个是xxx品牌。
比如店铺，三只松鼠就是这么干的：几乎所有的页面里都会出现三只松鼠。
比如平台，京东有狗，天猫有猫，苏宁也有狮子等等，电商界俨然是一个动物世界。
再比如珠宝品牌，卡地亚Cartier 有猎豹：
这只猎豹经常出现在各种品牌宣传广告里，或者制作成各种首饰，用户看到猎豹就会想到卡地亚。
5. 提炼某一句口号，重复使用
既然我们前面提到了视觉元素，那么文案或口号其实也是画面里的其中一种视觉元素，所以我们再以2017年天猫双十一宣传海报举例：
△ Budweiser 百威
△ GUERLAIN 娇兰
△ Beats
这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案，重复使用，其实就起到了这种画面视觉统一的作用。
而且这种方式也在很多地方有运用到啦，比如你看的很多动漫、电视剧，总会重复出现一些台词，嗯，说到这里，我想到了小时候看的一个动画片《宠物小精灵》，每集火箭队出场台词都是这几句：
然后每集结束的时候总会有那么一幕，喵喵被抛到空中然后喊出一句台词：「我们还会回来哒～」。
你看这种重复口号的威力多么可怕啊，一二十年了还让用户印象深刻呢。
不过，其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦，至于原因我也在前面作了解释，而且以上所有的方式其实都是可以结合运用的，并不是孤立存在的。
还有，大家注意到了吗？我在每一条后面都加了4个字「重复使用」，因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等，但是你压根就不露面，你还特别低调藏着掖着不展示自己，那谁还记得你啊。
说到这个，我想到了异地恋之所以容易失败，不也是差不多道理吗？你和男/女朋友三五年不见面没有关系，没法手拉手亲亲嘴也没有关系，但是如果你们压根就不联系，不出现在彼此的视线里，那感情自然会淡的呀，等于是白白给了别人可乘之机。
所以我一直都觉得品牌和用户之间其实也是一样的道理，就是在「谈恋爱」，而不是做生意，至于你们之间是谈的什么类型的恋爱，那就看自己本事了。
之所以我们需要做视觉统一，其实就是为了强化我们在用户心理的印象，让他们记住我们，记住我们是很有规范的，靠谱的，可信赖的品牌印象等等，并且还要重复的出现在用户的视野里，那怎么出现呢？方法就在我上面列举的几条内容里啦。
当然，你也得控制一个度，不要过份的运用这些方法，不然会招致用户反感的。
想想有的男孩子可以成功讨女孩子欢心，而有的却被女孩子嫌弃的不行，知道原因了吗？道理都是一样的啊。
你看下面这些世界杯期间的广告，画面 low，口号 low，重复次数又很多，用户记住是记住你了，但真的挺烦的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
常见的APP 图文布局有哪些？不同按钮有哪些用法？今天这篇总结帮新手认识基础知识，赶紧来收！用户所关注的内容以及不同的业务诉求决定信息的优先级排布，所以没有通用的布局，只有适合的布局。
1. 上图下文
上图下文更强调了图片的重要性，以「见」这个属性为优先，上图下文需要注意的是图片高度过高会严重影响版面效率，而一个具有商业化目的的产品对首页的版面效率异常看中，同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。
如果确实需要以大图+文的上下方式来布局，尽量找到版面的平衡点，考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示，例如4:3，2:1，16:9等。
宫格排列式的上图下文能够极大的提升版面效率，一般更多用于电商平台，在首页将某个模块的优质商品进行透出，提高转化和流量。缺点是缺乏信息完整度，在布局时需要考虑更多因设备、极限值带来的不同状况的问题。
可以看出，严选将金额跟在标题后面，而非固定位置，这样做的好处是将标题和金额关联度更高，形成一致性，缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。
2. 左图右文
左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图，在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示，否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。
菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面，也不会弱。
方形缩略图是最常用的形式，不至于太窄也不至于太宽，对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害，通常在视频缩略图会用到，但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间，同时版面的留白也更大，但是如果右侧信息过少，则会让页面有些单调和不完整。
左文右图就不再赘述，现在大多数左文右图在咨询和旅游产品中使用的更多，因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容，而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率，提升了多少满意度。我们可以简单的理解，如果说的是一件事，那么文字比图片更重要。如果说的是一样物品、人，那么左边放图更合适，体会一下。
3. 图文混排
为了使信息传达的更一致，通常如果没有大量的文字信息则我们会选择文字与图片混排的形式，为了适应多变的图片，我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。
其实严格意义上来说，能通过点击触发交互动作的控件我们都能将它定义为按钮，但是如果这样定义那就没的玩了，所以我们将移动端的按钮定义为具有引导性并且可点击的控件。
例如京东金融查看历史支取利率后的箭头，其实这才是这一行的引导按钮，但是为了更好的触发点击通常会将整一行都作为点击热区。
所以为了区分不同的按钮的用法，我这边将按钮进行了一个分类：主线场景、支线场景、异常场景。
主线场景下的按钮通常会使用的比较大，为了强化和引导核心的任务流程，所以该按钮应该是最醒目的。
样式通常会分为通栏和非通栏，而通栏则是从 MD 设计中衍生出来的一种形式。
1. 主线场景
要注意的是，通栏和非通栏按钮我们到底该如何选择，首先我们需要知道这样的按钮都是放在页面的底部固定显示，不会随着内容滚动，如果选择通栏按钮，则更适合可滚动的页面容器，也就是说一页中内容较多在一屏幕中无法显示全的页面，优点是按钮的优先级会很高，但是在 iphone X 这样的设备中，适配会纠结一些。
而如果选择不通栏的按钮，我们要考虑的是页面内容是否很长，如果很长需要在按钮底部加一层白色背景，尽量不要让内容穿过按钮，因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。
所以我们会发现考拉和淘宝虽然有样式区别，但实际上都相当于在底部有一层内容遮盖的部分。
2. 支线场景
再来看支线场景的按钮，支线场景的按钮一般能够分为：图标、文字、图标+文字、框+图文字+图标这样几种类型。
图标就不用说了本身就具有可操作的属性，也有修饰的属性，关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标，就是一种修饰型的图标，为了更好理解这里的定位是一种楼层定位，随着页面滑动到不同的业务模块而会跳动，这里并不是一个 tab 的功能，不能算是切换页面。
如果把定位按钮单独拿出来放在导航栏，或者页面右侧的空白处，我们就会觉得他是一个可点击并能够进行跳转的按钮。
包括「查看全部」这样的文字，即便不加箭头我们也会尝试去点击，高亮显示就更加明显，用户已经形成这样的意识，但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂，需要通过参考上下文的情景来做不同样式的选择。
不过支线流程毕竟是支线流程，为了不打扰主线流程，尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛，其实这个按钮用了实心的色块做了强引导，目的是为了提高客单价，同样只要是对最终目标有帮助，并不能算是跳失，说不定回来的时候买了更多更贵的东西。
3. 异常场景
异常场景下的按钮不需要做的过于醒目，一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态，并不是一种强烈的引导。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
UI巴巴 2018-07-05 21:02:31
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
相对于其他类型的APP，商城APP设计难度比较高，因为电商APP业务比较复杂，既要展示完整的业务功能，又要保证用户体验，非常考验UI设计师的设计功力。所以小编精心挑选了几款比较优秀的电商APP界面设计作品，希望对设计师有借鉴意义，里面的一些精髓还是值得一“抄”。
1、极简的设计，适用安卓平台，跟其它设计不一样的是筛选按钮放在底部。
2，商城的登录页和产品信息流页面。
3，安卓平台的商城app首页。
4，极简设计的商城app。
5，卡片式的产品翻页设计。
6，渐变色的运用，不对称的排版。
7，商城产品列表页设计。
8，服装类商城，筛选器的设计。
9，生鲜类商城app的设计。
以上商城app设计案例里有产品页界面设计，也有商城首页的ui设计。电商APP的设计不能只满足表面的视觉层面，还要关注业务的流程，这样设计出来的APP才能吸引更多用户访问和购买你的产品。
人人都是产品经理 2018-08-19 14:05:13
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本文将致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。enjoy~
想象一下你努力工作，花了很多时间来创建一个详细的原型，然后一个客户拒绝它甚至不接近他想要的。听起来很熟悉，不是吗？至少每一个设计师都经历过这样一个不愉快的局面。也许现在每个人都希望得到一些相关的建议，如何避免这种情况，但真正说没有一个完美的决定。
然而，有几种方法有助于降低客户拒绝的风险，并节省设计师的时间和勇气。今天的文章致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。
情绪板技术不仅在设计领域流行，而且在许多创造性的专业人员中流行。情绪板是确实的板（数字或材料），从照片到各种肌理，人们填充不同种类的东西以至于能将想法和概念形象化。
与线框和原型不同，情绪板不显示未来项目的详细图片。它们意在传递正确的情绪，并带来产品期望的情感。
情绪板是一个有用的工具，帮助设计师有效地与客户和团队成员合作。纸板可以在一个紧凑的时间框架内轻松地被创建，并把抽象的想法变成现实。这样，设计师可以有效地与他人分享他们的想法，因为视觉材料总是比流畅的说法更好。
情绪板是一个很好的方法来实验调色板，字体和风格，以及规划一个项目的视觉层次。每个人都自己决定在情绪板中包含哪些组成部分。UI/UX设计师通常使用各种样本以至于可以来描述界面元素的特征。让我们来看看情绪板常见的几种类型。
设计师经常收集免费高清的图片，方便他们在项目或其他地方使用这些素材。这些收集品可能有助于情绪板的创作。将美丽的照片组成的自由拼贴是传递设计理念的一种有效方式。此外，拼贴可以用插图，字体和颜色案例来构成。
创建这种类型的情绪板是最快的，也是最容易的。但是，如果客户比较关注细节，他们可能并不会对将来项目中的这些拼贴感兴趣。
灵感来源和想法可视化的另一种方法是找高质量的参考。网上有很多资源，如Behance和Dribble，在那里设计师可以通过免费浏览的方式获取灵感和还有一些实际项目的示例。由一个相同风格或任何其他特性联合起来的设计作品可以很容易地说明一个新项目的想法。此外，这样的情绪板可以帮助客户有效地理解一个概念，因为他们可以看到类似的参考，并能够大致想象出他们的产品会是什么样子。
这些情绪画板更像是原型和线框图。他们的目标是展示产品的结构和视觉层次。不同之处在于模版画板上的UI元素没有线框图中的原型或示意图那么详细。把随机的插图和照片来当做界面的构成元素，并以此来展示（数字）产品的布局。此外，可以用这种方式选择图像，从而更容易的确认合适的配色。这种方法比原型更快，因为它不需要细节。
我们中的许多人可能注意到，在设计工作流程中，线框和圆形总是被描述为基本阶段，而很少人提到情绪画板。有些人认为他们是在浪费时间，或是认为这只是一种“娱乐”。经管如此，仍然有很多人把画板作为每个创意过程的一部分。但是他们为什么要选择这项技术呢？在这里，我们收集了设计师的原因清单。
情绪画板的第一个且很大的有点是它不需要花太多的时间就能完成。这意味着，在几小时或者更少时间内，设计师就可以创建一个视觉指南，为客户提出一个概念。情绪画板可以很容易地编辑，这样既省时又省力。
这样的视觉指南是一个很好的基础，可以快速的跳转到下一个阶段——原型阶段。此外，如果客户对结果不满意且想要一个新方案，设计师也不会变得神经质，因为他们不用花一整天的时间来创建一个详细的演示。
当然，设计师不能总是依赖灵感，因为他们有工作要做，然而，如果创造者收到启发，事情就能更有效的进行。情绪画板是一个寻找创意和热情的好方法。美丽的照片和插图有助于找到正确的情绪和风格。此外，如果可能，你可以试着通过你周围的东西来创建一个情绪画板当做素材使用。据说手工对创造性思维有很大的影响。所以为何不试一试呢？
一个拼贴内可以包含照片、插画和颜色形成布置引人入胜的样品。在一个板上混合不同颜色的图片，即使UI元素还没有准备好，设计者也可以用调色板进行实验。
当产品处于抽象概念阶段时，设计师和客户有时很难在讨论时相互理解。例如，双方可以以不同的方式看到某种风格，从而引起争论。这就是为什么使用一些视觉参考如情绪板总是一个好主意
继续上面的观点，应该说任何长的报告都不能比视觉呈现更好地解释你的计划和想法。在客户的脑海中，文字无法成形，但视觉材料是一个可靠的指导，帮助客户深入深入细节并正确理解你的想法。
在早期阶段说明你的想法，这样客户可以看到你的计划以及他们的产品是如何成形的。
如果一个创意团队没有收到客户关于设计风格的指示，任务就落在设计师的肩上。要了解一种或另一种样式如何工作，不必为它们中的每一种构建详细的原型。添加到情绪板不同的纹理，实验类型的插图，测试字体，并改变颜色。用情绪板来尝试选项比用一个接一个地改变原型更快、更方便。
获得客户信任的方法之一是让他们觉得自己深入参与了一个项目。因此，在这个阶段，如果他们愿意，他们可以积极参与风格和样本的选择。在非设计师的情况下，做模型是一种很简单的技巧。
可以建议客户对照片和图片进行拼贴，如果不是新客户，也可以提供参考。通过这种方式，设计师可以轻松地了解客户的品味和偏好，并了解他们对项目的期望。
为了更实际地介绍这个问题，我们想向您展示由Tubik设计师Dima Panchenko编写的用于用户界面设计项目的扩展情绪板集。他还做了一些常规笔记向客户展示了情绪板，这对沟通的过程和选择了项目的概念有积极的影响。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
香港理工大学教授John Heskett认为，作为设计师有三个阶段性的价值：修饰者，区分者，设计驱动。在信息爆炸的今天，设计师每天阅读大量的设计文章、作品，但却依然提升缓慢。一个优秀的设计作品：到底好在那里？背后思考是什么？品牌价值有哪些？…为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计，帮你解读每个设计背后的思考！让基础审美养成设计好习惯的第一步。
------------------任何设计问题添加微信：uiskyss---------------------------
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。
所以此次在父亲节进行发力，制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。
相对于每年母亲节的声势浩大，但是一到父亲节世界就都安静了。这是机会也是挑战，机会在于因为父亲节平均声量较小，所以产出较容易被大家所看到，同时也面临着关注度不够的客观情况的挑战。
这个用户的状态反映了许多人父亲节送礼物的常态，送来送去好像什么都不合适，最终还是充了一笔话费，这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了，一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子，他们之间发生的火花。
但若单单如此，则略显单调，如何增加趣味性与可玩性呢？
确定了主题后开始具体着手项目具体制作，由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5，下面会每一步说明，我们在这些地方都是怎么做的。
剧本是故事性交互 H5 的重中之重，也是其对用户是否吸引的关键因素，若缺乏吸引力用户则无法到达最后看到品牌曝光，一个剧本最基本的需要一个通顺且合理的剧情，更高的要求是要充分利用用户好奇心，获取用户注意力，完成品牌与功能的曝光。按照写文章的方法，一个饱满的剧本需要有三部分组成。
具体的配音工作交给配音外包商就好，我们要做的就是对最后效果的把控。
首先要了解匹配原理，为了节省开发时间与资源，六种方言动画全部采用同一种帧数与时间，所以需要匹配每一句的配音时长。
配音时长可以通过三种方法控制：
确定好玩法流程后，进入视觉阶段，这次整体的设定是不同区域的爸爸形象，要表现出各区域的特色，结合好配音，才会达到比较理想的效果。
在人物的刻画上，视觉是有很多表现形式的，但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音，为了使整体效果更自然，更接近用户的想象，加上对产品用户群的定位，我们摒弃了低龄卡通的设计方向，在人物设计上选择了写实的设计风格，更符合用户心理对父亲这个严肃、严谨的心理印象。
结合对话的内容以及动画的表现形式，在细节刻画颜色搭配上增加复古的味道，使人物更活泼不呆板将字体图形化设计，结合中国元素，提炼各省市的简称加上有特点的人物设计，能更快速的帮用户选择以及增加亲切感，以下就是各区域的爸爸形象设计，有没有一款打动你呀。
人物的设定出来后，主页面的视觉风格就比较好把控了，复古的老式画报风格，是一个很好的选择～既能突出人物形象，又能把内容很好的划分整合。
板式设定：
主页面整体视觉风格确立以及版式布局，画面主体还是以人物形象为主，配合动画让整个画面更有动感，强调打电话的动作，更贴近产品。
在动画的设计上，也是遇到了很多困难，因为6个区域人物分为独白、对话、听电话3个部分的动画，而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内，又要保证形态的自然有趣，又要能对上字幕配音。
这里的难度非常非常的大，需要每个步骤都配合的刚刚好，非常感谢开发哥哥耐心打磨，最后的呈现还是很满意的。
动画效果，页面过多就选一部分进行展示：
最后整体数据效果还是比较理想，用户完成全部选项占比整体 UV 34.89%，说明 H5 内容对用户吸引度较高，能够用内容本身吸引用户到达广告落地页，完成运营目标。也带来较高的亲密充数据，相较平时有显著提升，给亲密充带来绑定与充值。
第一次制作配音动画相关的运营 H5，制作初期既期待又紧张，中间也遇到了几次看似无法逾越的难题，最终呈现结果也还较为满意。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
