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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
这段话是我补上的，我是设计师Johnson1949
提到谷歌原生系统UI大家有的人不是很喜欢，有的人可能已接触到安卓手机系统＝谷歌系统UI其实，有一些偏颇，2014年的谷歌系统UI还是比较难看，不过自从采用material design风格以来，流畅度和色彩搭配，图标的设计真的不错了，目前小编用的是motonexus6，旨在体验谷歌系统UI。有需要的可以试一下。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
需要做一个“开屏页”
“哪个开屏页”
“带跳过的哪个”
“带跳过的。是一页的那个还是可以滑动的？”
“滑动的”
上面的对话不知道有没有很熟悉。
我们都知道APP在启动时会有一些页面先行展示，例如这样
通常来说我们会简单的把它们统称为“开屏页”或者“启动页”
但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝
宝们表示很委屈。
其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。
定义：闪屏是每次启动过程中展示给用户的一个过渡页面，用于减缓用户在打开应用时等待的焦虑心情。
交互方式：闪屏通常是一张背景图片，无法进行交互，无法点击也无法跳转
劣势：无法跳转，只能进行展示作用，无法很好的承载营销需求
优势：展示时间不可控
使用建议：
避免包含太多文字字符（阅读速度慢的话可能还没看完就关闭了）
不用过去吸引用户的注意（干扰用户的本来目的）
不要做广告（干扰，且不能点击）
定义：启动页形式闪屏但拥有交互功能，常用于展示营销活动广告图片并引导用户点击
使用示例：常用与展示营销活动广告图片并引导用户点击
交互方式：
1、点击页面或按钮进入活动承载页
2、点击跳过，跳过启动页，进入首页，或N秒后自动消失
注：由于加载时间不确定，启动图通常会缓存并存在下次启动时使用
定义：用户安装或更新后首次启动时展示数个页面，常用于介绍应用的核心概念，功能玩法，使用场景，核心变更
使用示例：
交互方式：
1、左右滑动可以切换
2、最后一页页面可点击进入
注：首次打开才出现，之后就不在出现，清除用户数据，再次打开应用可以看到
使用建议：
1.轻易不要使用引导页,以免阻碍用户快速的使用体验
2.为了降低用户反感程度,引导页数通常越少越好(<5)
3.尽量提供“跳过”按钮
4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明
(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)
劣势：
增加了用户进入产品的时间，用户翻页过多，可能会失去耐心，降低好感度
通常来说：开屏三兄弟顺序如下：
流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。
Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。
这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。
不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信
你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~
云和数据西安中心 2018-07-09 13:24:29
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前言
搜索框是 app 内最常见的控件之一，可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下，根据页面中搜索的重要程度，搜索框也有着不同的样式。
下面就和大家聊聊常见的四种样式：一级tab、顶部搜索、搜索 icon 、隐藏式搜索。
位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ，简单、识辨度高符合用户已有的认知。
部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能，在“发现”页面中，由于增加其他运营内容导致流量被分摊，搜索相对就会弱一些。
一级 tab 相比其他方式，搜索过程更方便，点击操作更容易。
例如在贝壳找房 app 中，“找”作为该 app 的重要功能单独设立一个入口，用户搜索时无需进入二级页面中去完成条件筛选，搜索过程更方便、一目了然。
在筛选中选择总价、房型、特色、朝向等条件后，点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出，再次回到该页面后，仍会保留上一次操作的结果，方便下次修改和查找。
贝壳找房和 App Store 搜索入口在底部导航，这个位置符合拇指热力区操作，屏幕偏下的位置单手持握手机的时候更容易点击。
需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口，过于拥挤不适合用户点击。
位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。当用户浏览的时候，搜索框也会悬停在顶部，不断引导用户进行搜索。
通常以搜索框的形式存在，为了突出搜索框，搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。
不同类型的 app 搜索功能也不一样，除了文本搜索，淘宝有图片搜索功能，方便拍图找物；虾米音乐还有语音搜索功能，方便查歌找曲。
顶部搜索相比其他方式，搜索入口更显眼，为转化提供更多流量。
例如在天猫 app 中，当用户进入的时候，部分是带着明确的购买意图，这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上，即使是在上滑的时候，也是在顶部。
在顶部搜索框内推荐了客厅地毯，根据用户的历史搜索行为触发的引导，在用户已经搜索的基础上，转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词，能吸引更多的点击量。
需要注意的是结合场景去使用搜索功能，例如支付宝，刚进入 app 用户可能找不到想要的功能在哪里，这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候，用户想要浏览推荐内容，搜索功能相对减弱，为了减少空间占用，搜索框变搜索 icon 。
使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。
搜索 icon 相比其他方式，搜索位置更灵活，可以单独出现，也可以和其他功能组合。
当搜索功能在页面中不再是高频使用功能时，仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少，可与其他功能组合出现，例如 in ；也可单独出现，如猫眼，仅靠图标标红来提示用户此功能。
需要注意的是在同一个 app 的不同页面中，由于对搜索功能的需求不同，有些页面会选择搜索 icon ，有些页面会选择顶部导航。例如天猫 app ，在品牌页面中，对于用户即将浏览的内容都是根据用户行为产生和运营推荐的，自然搜索功能也会弱一些，采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品，采用顶部搜索框。
位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的，当用户下拉页面时，顶部搜索框才会出现，这就和使用场景密不可分。
微信首页（iOS端）刚进来的时候主要以处理最近回复为主，搜索功能相对弱化，在用户浏览列表的时候，搜索框也不会悬停在顶部导航。而在第二个 tab 通讯录列表中，主要以查找联系人为主，搜索功能一开始进入就显示在列表顶部。
总结
绝大部分的 app 里带有搜索功能，搜索功能可以帮助用户快速找到所需内容，减少时间成本。搜索也是提高流量的重要入口，吸引用户注意力。
但想要搜索在页面中恰如其分的应用并不那么容易，需要引导用户行为和分析使用场景，这就依赖我们前期大量样式积累，才能输出合理的设计方式。
我们再来回顾文中提及的四种搜索框样式：
1.一级 tab ：位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。
2.顶部搜索：位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。
3.搜索 icon ：使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。
4.隐藏式搜索：位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
据悉，Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面，有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。
小小设计控 2018-07-30 09:34:38
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、提取设计原则关键词
1. 提取一级关键词
第一步，先要去提取出关键词，这个关键词怎么来，有几种方式获取，第一个从整个公司战略出发，任何一个产品一定有他的战略，品牌战略，商业战略。举个例子，假设我们是 eaby，公司今年战略是全球化，高品质，正品，那么这个就是一级核心关键词，所有的设计语言一定要和公司战略结合起来，可以理解为战略关键词是整个设计语言顶部金字塔。
二、运用情绪版提取二级关键词
有了一级关键词后，需要去思考，那么什么样的设计能给人全球化的感受呢，什么样的感觉能有高品质，正品应该传递什么样的感觉呢？此刻需要用到第二个方法就是情绪版，通过情绪版去把符合这些关键词感受的图形具体化。
三、高品质特征是什么？
下图是一组日本的花茶设计，那么在这组设计中，设计师是如何体现高品质呢？
△ 首先包装很精美耐看，设计简约
△ 做工精量，整个产品包装，都是在富士山脚下
△ 采摘环境很透明，值得被信任
△ 整个品茶的过程也特别让人向往，很有仪式感
△ 整个的设计很完整，很有设计感在里面
通过以上案例拆解，我们能对这个高品质的关键词有更加进一步的理解，高品质原来在情感层面是一个这么抽象的感觉，但是很多同学会问，那么这二级词汇也很抽象，如何靠这个来做设计，很难去理解及表达，别着急，还有下一步。
1. 高品质设计表现形式？
关于高品质在视觉形式上如何来体现了，哪些设计感觉能代表高品质呢，这个时候就需要我们去寻找一些设计参考，这些案例要能代表高品质。
△ 清晰的有品质的图片
△ 牛皮癣，不精致不可取
△ 优雅的排版和留白，文字清晰，杂志感受
△ 图文密集，缺少版式不可取
△ 精致的布局，栅格的体系，给人品质感
△ 缺乏版式及设计感
△ 有设计细节的
△ 无细节不可取
△ 合理的配色，简单清晰
△ 山寨的配色不可取
△ 设计的延续性和完整性
2. GOOD CASE
3. BAD CASE
四、设计分层
以上就是我们从一个战略关键词逐步推导到一级关键词，到二级关键词，到设计手法，以及对应设计表达，推导的一个全过程。
五、总结
以上大概为一个设计关键词的全部推导过程及到设计手法的确定，也是设计语言里面最难的部分，后面的关键词也是类似的思考方法和思路，最终通过推导我们需要得出每个关键词的情绪图，以及对应设计特征，最终需要在界面中展示的形色字构质，一个完整过程。
比如国际化，同样通过前面思路，我们需要去思考国际化如何在设计中体现，去提炼出代表国际化的象征物，如地标，国旗，邮戳，货币等等，包括如何在界面中融于国际化元素，以及人物和节日场景。
结语
希望大家可以通过我这期的分享，能够详细理解到如何从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质，大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。
最后，依据推导出来的原则，以及对应的设计手法去做概念，去在界面中运用，最终完成设计语言第一步，设计关键词和设计手法定义。
图片素材作者：Tran Mau Tri Tam ✪
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
五步创作2018世界杯超级球星插画
2018年世界杯赛正在如火如荼地进行，为了以示庆祝，我们挑选了来自多个国家的25位超级明星，给他们创作人物插图，送给广大球迷们。在创作过程中，Leo Natsume＆Daniel Nyari给了我们很多灵感，非常感谢！
为了准确地画出每个球星的面部结构特征，一开始收集材料的时候就要收集的全一些。我们要从照片中提取每位球星的准确特征，这样最后做出来的插画才能“形神兼备”，才能非常生动。
让我们一起来看看设计思考的过程吧。
第一步
观察人物要从不同角度来看——正面，45度和侧面轮廓。此外，我们还需要收集不同面部表情的照片，比如冲刺的时候、休息的时候、微笑的时候等，才能更了解人物。做设计，我们不仅要看到“形”，还要看到“神”，多了解人物的个性和习惯有助于我们做出更有灵魂的设计创意。
第二步
接下来，我们要根据刚刚从不同角度做的人物分析总结一般面部结构和特征。我们以梅西为例，他留着经典的复古发型、大耳朵、小而有神的眼睛。当然，为了保持插图最终的统一性，所有人物的视线水平需要保持一致，并且应该根据人脸的长度和宽度以及发型进行调整。
第三步
通过前两个步骤之后，现在我们已经有了人物的主要图像了。现在，可以开始考虑人物的种族，肤色，发型和制服的颜色了，这样有助于做出原汁原味的人物视觉。同时，我们必须调整整体色调来调节亮度和饱和度的差异。
第四步
这是最关键的一步。完成以上所有操作后，就可以根据前面步骤中收集的照片选择每个球星最具特色的面部表情。例如，梅西微笑着轻轻抬起头的样子最吸引人，我们就选这个表情。
第五步
这是最后一步，我们将做细节的调整，包括人物的整体图像结构、颜色对比度、面部元素之间的比例等。然后再添加其他内容，如条纹、耐克/阿迪达斯徽标和其他此类细节。最后，将设计草稿缩小200％，以确定某些地方的设计是否足够亮。
经过上述五个步骤之后，我们的球星插画就出炉啦。我们一共设计了25位球星插画，挑选部分比较好的展示一下。And,祝大家看世界杯愉快！
蓝蓝 http://www.lanlanwork.com