首页

乾隆气哭了：《延禧攻略》不是莫兰迪色，而是中国传统色！

博博

乾隆气哭了：《延禧攻略》不是莫兰迪色，而是中国传统色！

平面设计ps教程cdr和ai教程

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


授权转自：艺非凡（ID：efifan）

每一种色彩，

都是一份匠心、一段历史。


中国传统色


一部《延禧攻略》，

火了永远的白月光富察•容音，

火了大家共同的敌人拔丝尔晴，

还火了“大猪蹄子”乾隆皇帝，

火到油管播放都破了10亿。


#以为傅恒买了iphone#


究其原因，

还是画面配色高级唯美，

让监制于正彻底洗刷了  

“阿宝色”黑历史。


从前的于正剧

现在的于正剧


网上不仅一片叫好，

还专门把这剧的配色命名为

“延禧莫兰迪色”。



这看着也很是纳闷，

《延禧攻略》的配色，

分明是最正统不过的中国色，

怎么还跟外国画家扯上关系了？



莫兰迪出生于20世纪初，

是一位意大利画家。

一生尽画些清汤寡水的瓶瓶罐罐，

反而因为低饱和度的特点，

在2018年被设计圈看中。

从此“高级灰”“性冷淡”成了明日黄花，

为了蹭上这波热度，

大家统统改名为“莫兰迪色”。



但是《延禧攻略》里的中国色，

可无心蹭这波热度。

莫兰迪色多以白色调和，

中国色多以墨色调和，

以明度纯度来判断简直天南地北，

差了整整两个色调。

「延禧」的服化道   

为了贴近传统花费了不少心血，

现在你却跟我说这是莫兰迪色？



《尚书》里写：

“以五采彰施於五色，作服，汝明。”

赤、黄、青、黑、白，

五色观是中国色的基础。


 01 


赤


从周朝开始，

“朱色”就成了中国正统。

工匠把朱砂矿石细细研磨，

涂嵌在甲骨文上以示“高亮”，

历经3000年不褪色。



后来又有了天子朱批、贵胄朱门。

抄写佛经也要用朱砂。

「延禧红」即是朱砂红，

「朱砂红」便是中国红。


恽寿平（清）


「延禧」中的宫门红墙，

均以朱色表示富贵。



傅恒、海兰察穿的侍卫服，

采用了烟红，这种颜色   

专门用来制作古代的僧袍，

以及批量生产的制服。



刚入宫做小绣女时的粉装，

容易被认成莫兰迪色里的“高级粉”，

实则是中国传统色“十样锦”。

由唐朝女诗人把信笺染成粉色而来。


张熊（清）


 02 


黄


黄色五行属中，象征中正帝统。

又是土地的颜色，十分尊贵。

唐代开始就只有皇族可以使用。

而且黄色越纯，权利越大。



「延禧」中只有皇帝、皇后

和贵妃才能用黄色。



 03 


蓝紫


古代的靛青色，

要从珍贵的青金石里提取，

是有钱人家富太太专用色。

也是剧中辉发那拉氏皇后的最爱。



莫高窟壁画中，

就使用了大量青金石  

制成的靛蓝颜料。

这可不是欧洲色地中海色，

而是纯正的中国色。



就连最接近莫兰迪色的紫色系，

也是传统中国色中的丁香色。



 04 


青绿


冒着失去女朋友的风险，

小编还是要冒死说一句：

我喜欢尔晴  

常穿的那件墨绿旗装。



「延禧」中以粗晶皂和墨绿相配，

正是明清时期国画常用的手法，

以粗晶皂为底色，

画上墨绿的枝叶。


乾隆御笔《水仙册》


魏姐就不适合穿墨绿，

而是用「荷绿+月白」

来表现素雅单纯的假象。



虽然都有低饱和度的特点，

但中国传统色，

是以水和墨来控制深浅，

色彩饱满不蒙灰，

和莫兰迪色系的高灰高白完全不同。



整部「延禧」的布景和服装，

采用了中国传统色之后，

呈现出了一种和谐稳定的感觉，

纯而不艳、灰而不脏。

就连群像都丝毫不乱，

满溢着微微泛黄的古画质感。



要知道在真正的历史上，

中国工匠为了制作这些传统色，

从春秋战国起，

历经了三千年艰难的探索。



上文提到的传统颜料

大多从天然矿石植物中提取。

一个合格的颜料匠人，

先要有一双慧眼，

在崇山峻岭中走上好几天，

发现适合提炼的岩石、植物。

有时几个月才能让找到1两适合的矿石。


GIF截自二更视频对颜料大师仇庆年的采访


再备上四件套：

榔头、石杵、石盆、瓷碗。

用榔头把矿石敲得稀碎，



再用筛子过滤掉粗糙的颗粒。



接着就是一天8小时枯燥的打磨。

就一个动作，

手握石杵在钵里用力旋转，

耳边不断循环刺耳的滋啦滋啦声，

直到没有声音才算成了。



很脏、很累、很寂寞，

这种足以把人逼疯的单调，

是颜料匠人几十年如一日的日常。



至少一月有余，

才能做出小小一方颜料。

只有用手磨出来的颜料，

才能历经千年不褪色。


甲骨文的朱砂，没有褪色（3000年），

马王堆的帛画，没有褪色（2000年），

敦煌的壁画，没有褪色（1500年），

《千里江山图》，没有褪色（1000年）。



正是制作不易，

每一种传统色，

都有一个极富韵味的中国名。

燕地女子采撷红蓝花捣汁凝成脂块，

是为「胭脂」。


画师：朴缜


宋徽宗梦见烟雨初霁，

水白而天空青成一片，

是为「天青」。


宋汝窑水仙盆


唐朝女诗人薛涛，

用草木将信笺染粉写少女心事，

是为「十样锦」。



中国工匠历经艰难，

制作了中国色。

中国画师钻研毕生，

把中国色用到。

每一种传统色，

都印刻着中国的历史。

现在终于有一部像样的古装剧出现，

却被莫兰迪色抢走了风头，

皮皮都要为传统色鸣不平了。


画师：朴缜


谁都知道，

莫兰迪会画画时，

大清都已经亡了。

只因近两年莫兰迪色风头正劲，

成了人人皆知的潮流色，

大家才会认为「延禧攻略」

采用了莫兰迪色系。

说到底，还是对中国传统色的

不了解、不熟悉。



其实中国传统色，

有着悠久的历史、淳厚的积淀，

每一色都纯正高级、堪称至美。



希望有一天，

再次看到「延禧攻略」

这样配色唯美的古装剧，

我们可以自信自豪地说出，

这不是莫兰迪色、霍克尼色、博纳尔色，

而是美了数千年的中国色。


参考资料：

二更视频《这才是真正的中国色》

中国色网： zhongguose.com

图片来自《延禧攻略》官方剧照

作者：RORO


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2668)

迅速掌握不同插画风格的方法：仿型与破型

博博

迅速掌握不同插画风格的方法：仿型与破型

沉下（李以杰） 西见

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

不管是UI设计中还是营销活动中，插画都有很高的出场率，原因并不复杂：插画比起图片可控性更强，更容易发挥创意，营造氛围，传递信息。从内容到技术细节，插画都在某种程度上超过现成的图片。


作为视觉设计师，我们也常常会接到各种各样的需求，针对不同的项目和产品绘制插画，往往项目时间紧张但又需要在插画展示上有差异性。

但看着网上风格各异的插图，往往想学习却又无从下手，该怎么办？


下面我将从仿型和破型两个角度来阐述，如何快速掌握风格各异的插画。



dribbble上形式各异的插画  

图片来源：dribbble




01

—


仿型


仿型，可说是一个模仿、练习的过程。选择喜欢的插画作为学习对象，拆解画面构成元素，总结代表性特征，了解其思考方式，是一种理解原作者绘画思路和想法的过程。


我们从形式上来说可以将一张插画拆解为5个构成元素：构图、造型、素描关系、配色和肌理。



1. 构图


构图是一张插画的骨架，各个元素按照设计的位置、大小排列在画面中，就能形成一张画最基础的模样。概括来说，最基本的构图有如下这么几种：


1.1 环型

环形构图是非常常见的一种形式感很强的构图，往往画幅中心存在一个视觉焦点，围绕视觉焦点发散／聚拢元素。



1.2 对称

对称构图的画面中存在一个轴线，画面元素围绕轴线两边对称。这种对称既可以追求强形式感的动态对称，也可以是相对的形成一种视觉平衡的动态对称。



1.3 平铺

平铺构图的画面往往不存在一个明确的视觉中心，所有的元素均匀的充满着画面,强调整体的统一性。


1.4 S型

S型构图是非常常见的一种构图方式，形式灵活多变，相信很多接受过素描静物训练的同学一定对此不陌生。S型构图重点不在于元素的布局是“S”或是“Z”，而是利用错位布局，营造空间，增强画面的节奏感。往往S型构图有着明显的层次关系，元素在空间上可以分为前、中、后景。



2. 造型


同样的元素，在不同的设计师手上画出的感觉一定是不同的，一个插画师最明显的风格特征也往往体现在造型的独特性上。造型的类别是无法枚举的，写实或抽象、松弛或硬朗、精细或概括...对造型感的提升需要我们多看优秀的作品辅以大量的练习。


风格迥异的人物造型 插画来源：dribbble


3. 素描关系


素描关系这个词想必大家不陌生，严格来说它也是造型的要素之一，单独提出来是方便大家更好的理解。素描关系由高光、灰部、明暗交界线、暗部、反光、投影组成。一个元素加哪几种素描关系，怎么加，加在那，什么肌理，都能左右一张插画的视觉风格。一般来说，对素描关系处理的越多，画面会有更多的细节，更趋近于写实。


素描关系由少到多



4. 配色


人类的视觉感知系统，对于颜色是第一位的，其次是形状。插图的颜色往往能决定观者的第一印象。对于配色，我们需要注意两点：


4.1 颜色的配比

决定画面整体色调的颜色，一般占画面60%以上，余下有30%的辅助色，10%的点缀色。这并不意味着画面中只能出现三个颜色，但是三个纬度的颜色需要尽量在色相上保持接近。


4.2 颜色的对比

首先我们要明确画面中有无对比。

颜色三要素：色相、明度、纯度。相应的对比也分为色相的对比，明度的对比，纯度的对比，当然更多时候是混用的。对比的作用有很多，较强的对比可以使得你的画面更富层次感和视觉冲击力，较弱的对比则营造一种柔和自然的感受。


不同类型色彩对比营造的画面

插图来源：dribbble


5. 肌理


肌理本是指物体表面的组织纹理结构，即各种纵横交错、高低不平、粗糙平滑的纹理变化，是表达人对设计物表面纹理特征的感受，是一种三维的概念。在这里，肌理所指的含义与质感相近，是一种二维概念。我们可以通过刻意制造的笔触感、噪点、纹理等，使得画面蕴含丰富的细节，更加耐看。

对同一元素的不同肌理表现






02

—



破型


破型，就是在充分理解学习对象构成的基础上，结合自己的风格痕迹和需要表现的内容，形成新的插画画面。

好的插画是形式与内容的完美结合，优秀的表现形式是为了传递信息，你应该明确插画需要传递何种信息，并且让所有的元素为之服务。

缺少内容创作的插画学习会失去内涵乃至成为抄袭，这是我们一定要避免的。如何更好的结合内容呢？


1. 理解各个元素的视觉表意


环形构图更聚焦，对称构图更具形式感；曲线的运用会让画面更柔和，贴近自然，直线与几何则更具现代感和科技感。先要理解各个元素所隐含的视觉语言，再通过你想传达的内容去挑选合适的呈现方式


2. 构建一个故事


想象一个故事，谁（who），在哪（where），什么时间（when），做什么事（what），怎样在做（how）？


比如说，如果是想画关于工作的故事，是谁在工作（加班狗），在哪（工位），什么时间（深夜），做什么事（加班），怎样在做（几个人讨论需求）。


然后我们再问自己一个问题：这个故事要传达什么情绪（有趣、温馨...）。

不断思考这样的问题，完成从故事到画面的转变，画面里物境-情境-意境的搭建。


3. 视觉转译


故事是文字，我们需要将文字视觉转译为图形。


让我们接着上面继续想：怎样造型的加班狗是有趣的，什么表情是温馨的?加班的桌上应该有什么？怎样的色彩和素描关系可以表现深夜，又体现出温馨? 等等。


答案也许会一点点浮现：深夜这个词从颜色的纬度，应该是冷色调的；从素描关系的纬度，应该是具有较深的投影，较强的高光，乃至是一个背光。


一点点的细化你的故事，将每一个词转化为可见的图形和颜色，并且快速的反馈到你的草图中去。当然，这个过程对于每个人来说都会得到不同的结果，自信一点，这才是你创作中最与众不同的部分

采用这样的思路，我们可以快速的创作不同风格的插画：


左侧为作者练习 右侧为学习对象





03

—



几个建议


1. 关上电脑


在自主创作的阶段中，我们一定会遇到想法不够，不知该如何进行下去的时候，此时应该避免回过头去看学习的对象，这样会让自己的创作变的局限，从而越来越像原作。


2. 足够细致的草稿


很多人对待草稿是不够用心的，粗糙的草图意味着你并没有真正做好独立创作的准备。请尽量保证从投影的造型到人物脸部的配色，每一个元素的细节都能在草稿画完之后心中有数，这样才能使你避免你对着AI／PS中的半成品不知所措。


作者平日的草稿


3. 向经典学习


dribbble上固然能提供许多新鲜的想法和创意，但是不妨去了解一下新艺术运动的插图，席勒的速写，达达主义和立体主义的海报等等，你会发现艺术史上如此多大师和流派，都是取之不尽用之不竭的灵感源泉。


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3157)

UI设计中的7个小技巧

博博

UI设计中的7个小技巧

 贺红阳


如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

原文链接：https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

原作者：Adam Wathan & Steve Schoger 

译：贺红阳


用设计战术代替天赋，提高我们的设计能力。


在我们设计开发过程中都不可避免的遇到需要做出视觉决策的情况，除了

专业资深高级设计师外，其他非专业设计师外不管喜欢与否，又或者我们的

公司没有全职设计师，需要我们自己为新的产品实现UI。


有时候我们正在攻克一个新项目，并希望它看上去比之前的另一个网站更好。对于我们（技术人员或者非专业设计师来说）难为的说“我永远也无法让这幅画好看，因为我不是艺术家。”但事实证明，有很多技巧可以提高我们的工作水平，而不需要有平面设计背景。


这里有7个简单的方法，大家可以使用来改进我们的设计工作。


1使用字体颜色（color）和字体重量（weight）来代替字体大小（size）创建视觉结构层次



当我们设计UI，样式文本化的时候，常见的错误是过于以来字体的大小，也就是字体的字号来控制层次结构。

“这文字重要吗？那我们就让它大点儿。”

“这是次层级文字吗？那我们就让它小点儿。”

不要把所有的重担都放在字体的大小上，试着使用字体颜色和重量来完成同样的工作要求。

“这文字重要吗？那就选用一个字重大些的字体，让它变得粗些。”

“这是次层级文字吗？那我们就用一个明度高些的字体颜色。”

试着并坚持使用2-3种颜色：

用深色而不是黑做主要内容，就像一篇文章的标题。

灰色用做次层级文字内容，像一篇文章的出版日期信息。

更浅的灰用作辅助次次要内容，也许是页脚的版权声明信息。


同样的道理，对于UI工作来说两种字重通常就足够了：

就英文字体来说，对于大部分的文本，普通字重（400—500），如果想要强调的文本可以是（600—700）；就中文来讲，主要内容字体一般在常规30-34，标题和想要强调的文本中黑36-42


在ui工作中，英文字体远离字重在400以下的字体，中文字体远离16像素以下的字体。如果你考虑使用更轻的字体重量来淡化一些文字，那就使用一个更浅的颜色或者更小的字体大小代替。


关于字体重量（font weight）字体粗细的值：

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

font-weight的属性值有3种指定方法：第1种是关键字法，关键字包括“normal”和“bold”两个；也是我们常见的；第2种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；第3种为数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

字体的粗和细这种描述方法本身就是一种相对描述，所谓粗和细也必须要有一个参照体。例如，在上面介绍的3类属性值之间需要有一个相互对照匹配的过程，这是一个很难界定的过程。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。

另外，有的字体看上去比较粗，但是它们的字体描述却是“Regular、Roman、Book（常规）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑体）”等字样，这主要取决于该字体本身“normal”表示的粗细程度。


2不要在彩色背景板上使用灰色文字


在白色背景下将文本设置成浅灰色是淡化内容重要性的一个好方法。但是在彩色背景此效果就不那么好了。这是因为我们在白色上看灰色是弱化了对比关系。让文本颜色更接近背景颜色，实际上创建了信息层次结构，而不是使用更亮的灰。

在彩色背景下有两种方法降低对比度：

1减少白色文本的透明度

使用白色白色文本，降低不透明度。让背景颜色稍微渗透些，以与背景不冲突的方式淡化文本

2.基于背景，选一个颜色

当你的背景是图片或是图案；或者当降低文字的透明度太枯燥或是文字降低透明度被冲淡时，这种方法都优于降低透明度的方法。

选择一个和背景相似的颜色，调整它的饱和度和亮度直到你觉得合适为止。


3.偏移卡片的投影

不要使用大的模糊和扩展值，这样会使得卡片的阴影更明显，所以添加一个垂直偏移量。它会看上去更自然，因为它模拟了一个从上往下发光的光源，就像我们真实世界中经常看到的那样。


这种内嵌式阴影可以很好的用在输入表单上

如果你有兴趣学习更多关于阴影设计的知识， Material Design是很好的设计指南（https://material.io/design/environment/elevation.html）


4尽可能少使用分割线和描边

当你需要在两个元素之间创建分割时，试着不使用分割线。

虽然分割线是区分两个元素的好方法，但它并不是唯一的方法，使用太多分割线会让你的设计感觉很杂乱。

下次当你发现自己想要使用分割线的时候，试试下面的方法：

1使用卡片投影

卡片投影是一个非常好的区分元素的轮廓方式，就像边框分割线一样，完成同样的目标但它更巧妙而不分散注意力

2使用两种不同背景颜色

为相邻的元素添加稍微不同的背景颜色通常是在他们之间创建区别的好方法。如果你已经使用了不同的背景颜色，又使用了边框，那请试着把边框删掉，你可能不需要它。

3添加额外的空间，也就是留白。

除了简单地增加距离之外，还有什么更好的方法在元素之间创建分离呢?在空间上加大更多的距离（更多的留白）是一种好的方法，在不引入任何新的UI组件元素时来区分元素

5.不要放大本来应该很小的图标

如果你正在设计一个可以使用一些大图标的页面，像一些登录页面的“特色”部分，你可能本能的使用免费图标库里的图标，然后放大它们的尺寸直到符合你的需要。

两个超棒的免费图标库分享给大家：

1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

2 Zondicons(http://www.zondicons.com/)


“它们毕竟是矢量图，所以如果你放大尺寸质量是不会受到影响的对吧？”

虽然我们增大矢量图片的尺寸它们的质量是不会下降的，但是当我们把它们放大到3倍或者4倍的时候，那些原来用16-24px绘制的图标永远不会看起来非常的专业。因为它们缺少细节，并且总是感觉不成比例的矮胖矮胖的。

如果你只有小图标，试着把它放在另一个图形里，并且给这个图形一个背景色：

这可以让你的图标尺寸更接近原始图标尺寸，同时仍就充满大的空间。如果你有足够的预算，你也可以使用高级优质图标集做设计，在大的尺寸上使用大的图标，付费图标库如Heroicons和Iconic。

1  Heroicons  （http://www.heroicons.com/）

2   Iconic（https://useiconic.com/）


6.在平淡的设计中使用超重的彩色的边框

如果你不是一名平面设计师，相比其他作品里的漂亮摄影照片或者颜色丰富的插图作品，你如何在你的uI设计中添加少许的视觉天赋。


有一个简单的技巧可以让你的界面有一点不同，那就是添加超重的彩色边框在你的部分界面里，它会使得你的界面不同于其他平淡的设计。

例如，沿着警告信息的侧边加一个超重的彩色边框：

又或者是高亮显示激活的导航栏项目

甚至是在横穿整个布局的顶部：


它不需要任何的设计天赋增加一个彩色的矩形在你的UI作品里，并且它可以让你的网站像你期望的那样更具设计感。


选颜色很困难？试着从有限的颜色板中选取颜色，例如dribbble的颜色搜索，以避免被传统颜色选择器带来的无尽的可能性。


7不是每一个button按钮都需要一个背景颜色


当用户在一个页面上有多个可操作路径时，很容易陷入基于纯语义设计行为陷阱。

如Bootstrap这样的框架式网站鼓励你这样做，当你添加一个新按钮时，它会给你一个语义样式菜单供你选择。

“这是一个正面的行为吗？是，那就使用绿色。”

“这是删除数据的操作吗？如果是，那就使用红色按钮。”


语义是按钮设计的重要部分，但还有一个常常被忘记的重要的维度，那就是等级／层次结构（hierarchy）


页面上的每个按钮放在哪都基于重要性金字塔的某个位置。大部分页面仅有一个主操作按钮（primary action），几个不重要的次级操作（secondary actions），和几个很少使用的三级操作（tertiary actions）


当设计这些操作按钮时，最重要的是考虑它们在层次结构中的位置。

主要操作按钮应该是显而易见的，实心纯色的，与背景颜色是高亮度对比。

次要操作按钮应该是明确清晰但不突出。轮廓风格或者是与背景颜色低对比是很好的选择。

三级操作路径应该是可发现但不显眼。将这些操作路径设置成链接样式通常是最好的方法。


“那破坏性的行为呢，难道不应该是红色的吗？”

不一定！如果破坏性操作不是页面上的主要操作路径，那么最好对其样式按照二级或者三级按钮的形式处理。


保存大的，红色的并且加粗的设计样式，以便于当界面的主要操作路径是负面的操作路径时使用，比如在确认的对话框中：






蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(3347)

走进大师系列专题——丰子恺

蓝蓝

走进大师系列专题——丰子恺

 贺红阳

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

每一个独立自由的灵魂 都是生活的艺术家。


（前言：再第一次开始运营公众号时候，其实有想了很多主题。对于学习技能方向大家可能会更甚喜欢。可是最终确定每周一的发文是关于中国大师系列的文章。因为古语有云教育的四阶段：先德行，而后言行，政治，最后才是学问。这里的学问便是如今的技法。而今交技法的文章太多，了解文化常识的太少。而学习要追书本源，学到根本上，才能以不变应万变。生活的常识，历史的常识是我们现在的短板。既学艺术设计，必要了解设计艺术历史，了解在艺术设计里闪闪发光的前辈们，我们才知道什么是好，才不会被当前的流行所困惑，在设计艺术中能够找到一种释放感，并通过艺术来思考自己的生活。）



今天带大家认识一位民国时期童心未泯的“小大人”——丰子恺先生。以纯真漫画，搭建属于孩子的自由世界。


丰子恺（1898年11月9日——1975年9月15日），浙江嘉兴桐乡人。原名丰润，后改为子恺，笔名TK。师从李叔同（弘一法师）和夏丏尊。


丰子恺一生多才多艺，著作等身。在众多艺术领域取得了卓越成就。他的漫画闻名于世，散文，音乐研究，译作也十分出色。丰子恺的漫画简洁生动，清新自然，意味深长，既有古典诗词的美妙意境，又不失中国传统绘画的章法和气韵。是中国近代漫画的鼻祖和抒情漫画的创始人。


丰子恺先生在画画


1914年，丰子恺考入浙江省立第一师范学校，师从李叔同和夏丏尊。

夏丏尊负责教授国文课，他所提倡的白话文被丰子恺奉为圭臬，其中通俗平易的特点，贯穿了丰子恺往后一生的创作。

夏先生也同时担任舍监，他事无巨细地关心着丰子恺的生活，这种照料在很大程度上，让初到陌生环境中的丰子恺，内心有了安全与归属感。

另一位恩师李叔同，可以说是对丰子恺影响最大的人。他不怒自威的气质深深吸引着丰子恺，丰子恺曾表示：凡是李先生喜欢的我都喜欢。

李叔同教音乐美术课，在丰子恺眼中，李叔同凡事认真。在他“温而厉”的教导下，丰子恺养成了做事一丝不苟的习惯。

有一天晚上，一向极少论人的李叔同，把丰子恺叫到身边对他说：在我所教的学生里，从没有见过像你这样快速进步的。回去后，丰子恺在日记本里写道：当晚这几话，便确定了我的一生。

此后两年，丰子恺在绘画上下足了苦功，有空就向李叔同请教，他们的关系也越发亲近起来。

丰子恺曾撰文《我与弘一法师》，专门描述他心中的李先生：“就人格讲，他当教师不为名利，为当教师而当教师，用全副精力去当教师；就学问讲，他博学多能，其国文比国文先生更高，其英文比英文先生更高，其历史比历史先生更高，其常识比博物先生更富，又是书法金石的专家，中国话剧的鼻祖。他不仅能教图画，音乐，还拿许多别的学问为背景来教他的图画，音乐。夏丏尊先生曾说：“李先生的教师，是有后光的。”像佛菩萨那样有后光，怎不教人崇敬呢？而我崇敬他，更甚于他人。


《丰子恺漫画全集》由《儿童相》、《儿童相 学生相》、《社会相》、《社会相》、《护生画集》、《绘画诗歌》、《绘画小说 封面插图》、《彩色画卷》和《彩色画卷（精品画集）》九卷组成，全面收录了丰子桤先生生平所画的优秀漫画。


以下图片来自《丰子恺漫画集》



丰子恺的画和文，如同“一片片落英，含蓄着人间的情味”，又如“一首首带核儿的小诗”，句句含情。从饱读诗书的文人到平头百姓，对他的画和文章都有很高评价。


我的脑子里有一个“丰先生”的形象：一个与人无争、无所不爱、一颗纯洁无垢的孩子的心。——巴金


从丰子恺先生那里，我学到了朴素。——林清玄


他的画极家常，造境着笔都不求奇特古怪，却于平实中寓深永之致。——朱光潜


“我们都爱你的漫画有诗意，一幅幅漫画，就如一首首小诗，带核儿的小诗，我们就像吃橄榄似的，老觉着那味儿。”——朱自清


“我觉的，丰子恺是现代中国最像艺术家的艺术家，这并不是因为他多才多艺，会弹钢琴，作漫画，写随笔的缘故，我所喜欢的，乃是他的像艺术家的真率，对于万物的丰富的爱，和他的气品，气骨。如果在现代要想找寻陶渊明，王维那样的人物，那么，就是他罢了。他在庞杂诈伪的海派文人中，有鹤立鸡群之感。”——吉川幸次郎（日本汉学家）


以儿童为师，以自然为友，以“赤心国”和“明心国”作为自己毕生的“理想国”，不忘初心，作善知识。丰子恺先生一生的故事和作品，不仅向我们呈现了一个单纯，烂漫，和完整的童心世界，也让我们领略了一种亦诗亦哲，童心即佛性的生命境界。——徐鲁（诗人，作家）


“儿童”在丰子恺漫画里出现频率最高，可以说，他画尽了孩子的喜、怒、哀、乐、懵懂、稚拙等多面的神采。

他和孩子们一起办家家酒、唱歌、画图、做游戏，带孩子们散步远足。他随身带着一个小本本，孩子的言行举动常被他迅速描绘下来，成为取之不尽的创作素材来源。


丰子恺曾说：“我的心为四事所占据，天上的神明与星辰，人间的艺术与儿童。”他认为世间事物的真相，只有孩子们能最明确、最完全地见到。因此，他借助儿童的视角，细致描摹世间的温柔与感动。

在对孩子的不断记录和创作中，他深深地体察他们，了解他们，亦步亦趋地随着他们成长。


最是好光景，努力惜春华。

他是“最像艺术家的艺术家”,也是最懂孩子的爸爸.

在丰子恺的漫画里，既有成人改造孩子的无错之过，又有孩子必然成人的无可奈何。他没有站在教育家的角度上，石破天惊地针砭时弊。而是以一个父亲的身份出发，对世间美好单纯的消逝，流露出无比的惋惜之情。

他有最有效，最愉快，也是最省钱的方案——他能够听懂孩子们的心。


他极尽全力地抛开大人的思维，反对以成人之心，度孩子之意。他常常站在孩子的立场上，以饱含同情的笔墨，绘出成人对孩子无形的伤害，在这个过程中，他戳到了中国教育的痛点。


有这样一个故事：有一回，弄堂里来了个卖小鸡的小贩。孩子们看着雪球似的小鸡十分可爱，哇哇大叫起来：“要买，要买！”

小贩仗着孩子们的喜欢坐地起价。丰子恺觉得不值，就没买。

他拉着没得到小鸡而哭泣的孩子们回家，想教导他们，下次千万别再嚷着“要买，要买”啦！可他实在没法把这话说出口。这难道不就是教导孩子，“看见好的嘴上不可说好，想要的嘴上不可说要”吗？


孩子最可贵的就是天真烂漫的性格。如此教育他们“懂事”，乖觉圆滑，岂不是早早叫他们做一个面目虚伪的大人了么？回到家里，丰子恺眉头微蹙，写下这篇文章，也记录了自己的困惑与思考。这样的生活小片段，在新书《日月楼中日月长》，随处可见。


人要像小孩一样，怀有一颗善良纯真之心，看待世间万物，才会懂得那些小事的真正趣味，才能看到更多生活的美。


家人共度欢乐时光，连墙上的钟都在笑


一生童真，一生有趣



“世寿所许，定当遵嘱”

李叔同出家了，法号弘一法师。他知道，老师的爱国热忱从未歼灭，为了帮助老师弘扬慈怀，他决定为弘一法师画一部《护生画集》，40岁画40副，50岁画50副，直到100岁画100副。

为了笃定意志，他给老师留下一封信，写了八个字：“世寿所许，定当遵嘱。”即若自己能活到老，便将此画按约定完成。师徒两人发愿流布“护生画集”，商议由丰子恺作画、弘一大师题字。

“护生画集”，所谓“护生”即是“护心”。

弘一法师说：“去除残忍心，长养慈悲心，然后拿此心来待人处世”。

画集预计在1929年出版，丰子恺想到，那时弘一大师正好50岁，何不画成50幅出版，以贺恩师50寿辰。丰子恺把这个想法告诉了弘一大师，弘一大师也极为赞成。就这样，由丰子恺作画、弘一大师配文、马一浮先生作序，在1929年弘一大师50岁时，50幅的“护生画集”出版。


1938年，日军侵华、丰子恺携着一家老小，颠沛流离，过着逃难求生的日子。眼看弘一法师60岁生日在即，无论什么情况，都不能忘了那60副画作。

某个夜晚，大雨滂沱，一家人躲在一间屋子里避雨安顿，桌子上正摆着未创作完的画作，不巧桌上的瓦当处有一漏洞，把整个画稿浸湿。丰子恺没有办法，只能熬夜赶制，一连下了一周雨，一连熬了一周夜，为此他染上风寒，依旧不忘弘一法师的重托。


后来弘一大师没能等到“护生画集”的后几集，就在1942年、63岁虚龄时，在福建圆寂了。弘一大师圆寂前，心里记挂着《护生画集》的事，他曾经给友人写信，希望友人能帮助丰子恺完成后几集的编绘工作，他在信中说：

“务乞仁者垂念朽人殷诚之愿力，而尽力辅助，必期其能圆满成就，感激无量。”

但后来他委托的朋友也相继过世，这样“护生画集”的创作使命就落到了丰子恺一个人的身上。丰子恺牢记恩师嘱咐，决心把“护生画集”继续画下去。


无论遭遇了什么身心上的折磨，乐观的丰子恺一直瞒着家人，报喜不报忧。

直到有一年冬天刚下过大雪，女儿丰一吟去给他送御寒的衣服，看到父亲孤独地站在寒风飕飕的田野里，胸前挂着一个蛇皮袋，正在一点点地摘棉花，全身冻得直发抖。之后，在女儿的一再要求下，丰子恺才带着女儿去了自己的住处，女儿在那个破旧的牛棚草屋里，清楚地看到父亲的枕头边还有一堆没融化的积雪。后来因为环境的恶劣和非人的折磨，患上严重肺炎的丰子恺被允许回家养病，此时的他已经是76岁的古稀老人了。

回到家中的丰子恺并没有按照医生的要求，好好休息，积极配合治疗；相反，他甚至偷偷扔掉医生开的药，因为这样他的病好不了，就可以继续留在家里、继续作画了。

他每天凌晨4点就起床，开始着手画《护生画集》的第六集，此时与恩师约定的最后一集还有6年时间；但丰子恺似乎隐约感觉到自己将不久于世，所以才拼命画的吧。

儿女们怕他累坏身体，也担心造反派随时来家里搜查，就把他的笔和纸都藏起来了，丰子恺就向他们哀求道：

“你们这是要我的老命呀，快还给我吧。”

1973年，丰子恺终于画完了“护生画集”第六集的100幅画；他自知不久于人世，便秘密委托给朱幼兰居士保管。

1975年，丰子恺与世长辞，未能见到六集“护生画集”全部出版。

1978 年，与丰子恺失去联系多年的广洽法师来到上海，本以为“护生画集”的第六集会遗憾缺失，却没想到丰子恺早已将第六卷的稿暗自完成，而丰已去世3年了。广洽法师跪在丰子恺灵前，老泪纵横，为丰超度祷告，深念故人。


随后，广洽法师将第六集的画稿和诗文带到了新加坡出版。这时丰子恺信守了半个世纪的约定，如愿以偿。

在这半个世纪的时间里，人生几经沉浮，世事几度沧桑；但丰子恺却始终抱守诺言，践行了对恩师“世寿所许，定当遵嘱”的承诺。

他把一件事，就这么做了一辈子。


“护生者,护心也。去除残忍心,长养慈悲心,然后拿此心来待人处世。这是护生的主要目的。”——丰子恺创作《护生画集》的宗旨


丰子恺先生文学造诣也很高。

著名服装设计师马可创造的“无用”品牌，其品牌精神便是来自丰子恺先生的《无用之美》。

个人品牌马可之无用(WuYong)之所以起名为“无用”,马可这样说道:““所有人都在追求有用，做个有用的人，做个有用的物件，买个有用的东西，是否有用甚至已成为我们做事的前提。但眼前的有用与未来的价值常常不同，我想做些眼前未必有用但以后会有价值的事，我想把人们眼中无用的东西变得有用，我想人们不再以是否有用作为取舍的原则。我喜欢无用，才能赋予它新的价值。价值从不在物件本身，而在使用的人。

所以无论从事设计艺术的哪个行当，深厚的文化底蕴和知识是我们创作的灵感源泉，正是这背后的东西让我们的作品变得深刻，美得深刻，赋有灵魂。


推荐大家阅读书籍吴浩然的《丰子恺的故事》，了解大师之后。推荐阅读散文随笔《缘缘堂随笔》，《缘缘堂再笔》《画中有诗》《白鹅》《活着本来单纯》漫画《子恺漫画集》《护生画集》艺术绘画《无用之美》。


这本书名字叫《无用之美》，然而《无用之美》只是丰子恺大师的一篇文章。这本书给大家讲的都是绘画门外汉需要普及的绘画知识，如何把绘画这门高雅的艺术向普通大众传播，这其实挺难的，我觉得丰子恺大师做到了。我觉的艺术的最高级形式便是与生活融为一体，你的一言一行，所思所想都是艺术。


作家安·兰德在《源泉》里写过一句话：“像个大人一样生存，像个孩子一样生活。”


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务





评论(0) 浏览(3740)

海底捞的“七宗罪”

博博

海底捞的“七宗罪”


 云锋金融 

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


傲慢（Prejudice）、嫉妒（Envy）、懒惰（Sloth）、愤怒（Wrath）、贪婪（Greed）、暴食（Gluttony）和淫欲（Lust）

——这就是天主教教义所说的人类七宗罪。

七宗罪，源于人的底层操作系统。根植于基因深处，人性的种种弱点是所有人都逃不开的囚牢。


海底捞，这个起身于蜀地简阳、得名于麻将桌的火锅品牌，用了24年做到家喻户晓，距离上市仅差临门一脚，如参考香港上市的呷哺呷哺30倍PE，则估值将超300亿元。


做餐饮的那么多，做火锅的那么多，但有且只有一家海底捞。


为什么？


海底捞的故事，正是对人性的把握在商业运营中的卓越体现。我们且从这七宗罪一一道来。

   

愤怒 Wrath



现代人出去聚餐，吃的那叫薛定谔的饭：在进店里前永远不知道出来时会是一个开心的你还是一个愤怒的你。毕竟“吃饭十分钟，等位一小时“这种事情太常见不过，而遇上傲娇服务员或者低效的服务，令人一顿饭不爽也是常有的事儿。

 

但在海底捞的店，我们很难看到一个愤怒的客人。

 

在这里，你不会气愤自己把有限的生命花在了无限的排队上。

 

海底捞的服务是从排队就开始的：客人刚一入座就有小零食和茶水，等位桌上有跳棋和充电宝，实在无聊还可以在店内做个指甲，擦个皮鞋。等餐桌布置好了，带着愉悦的心情落座，甚好。

 

落座后，戏很多的扯面小哥、点多了菜时的善意提醒、提供给女士的头绳、热毛巾和手机塑料套，又会让你觉得贴心又舒适。


在海底捞，消费者不仅远离愤怒，甚至会得到一丝生人间难得的温情。


“您是自己来吃火锅吗？”


“是的。”


“好的，请跟我来。”


一上桌，坐在对面的小羊正在微笑看着我，它面前还有一杯水。

 

图片来源：海底捞招股说明书

傲慢Prejudice


而海底捞“顺着顾客毛捋”的背后，是对顾客心理的巧妙把握。这份把握，来自它让员工们放下了“傲慢”。

 

服务行业的从业人员很难，餐饮服务行业的从业人员更难。高强度的工作、难缠的客户和较低的薪资待遇，很难让这个需要“笑脸迎人”的行业工作人员开心起来。“拜高踩低”、“势利眼”、“傲慢”，随便搜搜各类评价，总能或多或少看到顾客这样的抱怨。

 

海底捞有着大量餐厅一线员工：在它共计50299名的员工中，餐厅员工达49162人。


但在海底捞，几乎看不到傲慢的服务人员。


人性的傲慢，是如何被化解的？这离不开两个关键词：与顾客满意度挂钩的评价制度和服务自主化。

 

如何去衡量一个餐厅的好坏？它的装修、氛围、服务、菜品、卫生......，无论是细化KPI还是看翻台率，想要制定一个完善的硬性考核指标，困难重重而且容易被规避。最后，海底捞诉诸一个简单的规则：顾客满意度。

 

海底捞引入了独特的“神秘人”制度。除了顾客的评价会被纳入员工的薪酬评定之外，国内约1600名第三方神秘嘉宾会定期进行“暗访“。“暗访”是对餐厅质量和客户体验的综合评估，共有三个等级：


A级餐厅代表最高的工作质量，其员工在新店任命店长时将会得到优先选择的机会；


B级餐厅则意味着有待改进，无功无过；


C级餐厅将需要接受重新培训，且其店长将失去开设新餐厅的机会，并面临革除职位的风险。


做好了是荣誉和奖励，做不好是惩罚甚至羞辱。店长们不仅不会“傲慢”，还会卯足了劲，去服务好客户，并激励员工去服务客户。

 

怎么激励呢？能够提供最优质服务的员工才能赚最多的钱，得到最快的晋升。为此，海底捞做到了充分的放权。

 

“我们并无规定服务员服务步骤的固定服务。实际上，我们鼓励服务员自行主动判断如何为顾客提供最佳服务。”

——海底捞招股书

 

要不要给顾客提供免费的菜品、如何根据客人的口味提供建议、甚至包括赠送指甲油这样的小细节都可以由员工自己把握，而不超过3万元的审批也可以让店里自行决定。

 

比起坐在办公室里的决策层，员工既是服务的提供者，也是效果的第一反馈者。他们更能切身明白进店的消费者需要什么，也更有动力去这么做。因为客户的满意，最终都会变成他们的年终绩效。而海底捞的放权，更让他们觉得自己并不单单只是在给别人打工，工作也可以自己做主。

 

有了实际有效的激励和为自己工作的自由感，员工才会更有动力提供服务，彻底放下“傲慢”。

 

而这一方式确实是有效的。根据沙利文报告，按照营业收入计算，2017年海底捞国际在全球（包括中国）的中式餐饮市场中排名第一。2016年至2017年，海底捞收入增长率为36.2% ，而根据中国餐饮报告2018，2017年中国餐饮行业同比增长仅为10.7%。在海底捞的招股说明书中，其明确将就餐体验列为其品牌发展基础。


根据对海底捞员工的调查表明，85.1%的受访员工对海底捞的工作环境感到满意，超过80%的员工认为海底捞提供的待遇和管理架构激励了工作。


的确，海底捞的员工成本增长很快。它的平均员工成本是6.2万元，差不多是呷哺呷哺3.9万元的的1.6倍。然而，海底捞的人力成本占收入比仍在30%以下，在餐饮企业中这一比率处于中游。这恰恰说明了：放下傲慢而充分得到激励的员工，为海底捞创造了更多的价值。

海底捞近年用人成本一览


图片来源：海底捞招股说明书，云锋金融整理

嫉妒Envy


嫉妒，是人性中一个难以启齿的弱点。


做好一家火锅店不算难，难的是保证每一家都能提供同样高质量的服务。海底捞自主化和个性化的背面，是复制和规模化的难题；传承和发扬，面临着严重的激励问题。


即便家族餐饮企业，也可能陷入纠纷：例如“九头鸟”、分裂成到“九头鹰”、“九头凤”，这家湖北菜馆经历了内讧和争端，止步于区域连锁。


那么，海底捞如何激励店长师傅倾囊相授，培养出比自己更强的人、开出更赚钱的店，从而形成全国连锁呢？


答案在于师徒制。师徒制的本质，是正视人性中的嫉妒，并用机制去克服它，使得师傅从自己的利益出发，乐于传授徒弟。


每年，作为师傅的门店店长将获得以下两种选项中的较高者作为薪酬（除基本薪金）的部分。可以看出来，如果徒弟徒孙干得好，店长可能会获得比自己店经营更好的效益。老店在培养新店时，自然也会更加卖力。高质量可规模化的服务水平也将在此推动下持续下去。


选项A

其管理餐厅利润的2.8% 

选项B

其管理餐厅利润的0.4% 

其徒弟管理餐厅利润的3.1%   

其徒孙管理餐厅利润的1.5%   

 资料来源：海底捞招股说明书，云锋金融整理


海底捞利用师徒关系的绑定，一方面增强了员工与店长的纽带，一方面，极大节省了培训的开支，帮助新店从老店汲取经验从而复制其增长。

 


图片来源：海底捞招股说明书

 

在海底捞，有个很特别的员工管理形式叫做“抱团小组”，通常是由一个区域内5至18家存在师徒关系的门店为主，餐厅间互帮互助，老店帮助新店进行拓展与经营，落后门店也能从中得到指导。

 

强店带弱店，师傅带徒弟，无形间就降低了总部的培训成本，形成稳定良好的关系。

 

目前，海底捞共有37个抱团小组，覆盖超过300间餐厅。在海底捞，并不存在教会徒弟，饿死师傅，反而是，教会徒弟，富了师傅。



懒惰Sloth


说罢员工管理，我们来看看海底捞是怎样抓住客户需求的。

 

有句话说得好，世界是由懒人推动进步的。面对日益懒惰的消费者，海底捞有两件事做得非常到位，一是会员制，二是火锅外卖。

 

据悉，海底捞是最早使用平板电脑为客人点餐的餐厅之一。而海底捞做这个可不是为了“时髦”，而是另有大用。


通过电子点餐注册会员的消费者，在下次进店点餐时，只要登陆，就可以根据自己上次的点餐习惯，快速选择菜品。不单单是烦恼吃什么的时间被消减，就连从牛羊肉划动到蔬菜的时间都会被省去。

 

通过大数据，海底捞帮助消费者节省思考和点单的力气，不光在想偷懒的顾客端讨了巧，同时也无形减少了每单顾客的用餐时间。


据招股说明书披露，2017年海底捞的翻台率达到了每天5次。比起别的火锅店在菜单上勾选讨论，海底捞的不少顾客都能发现自己原来是个“有效率”的人。

 

而外卖，则更是我们的懒人福音。外卖并不新鲜，然而海底捞的火锅外卖，的确发挥出了想象力，抓住了消费者的懒惰，受到了全国人民的喜爱。

 

懒得洗头、懒得化妆、懒得换衣服、懒得出门，高节奏高压的生活，让现代人格外珍惜自己的休闲时光。即使海底捞的等位服务再有趣，想着要浪费几十分钟排队还是让人觉得不太值当。

 

一个电话，快递小哥送来了整整齐齐的超大纸箱：食材和小料分门别类码放整齐，附赠超长火锅筷子和一次性餐具，甚至还有衣服除味剂。——海底捞的外卖，一如海底捞的堂食，以令人惊喜为目的。


2010年，海底捞正式开展火锅外卖服务。至今，它已经在超过40个城市有自己的外卖业务，外卖占比从2015年的1.3%提升至2.1%。

 

海底捞外卖业务三年营收一览

图片来源：海底捞招股说明书，云锋金融整理

 

海底捞通过把握人类的懒惰，布局了外卖市场这一快速增长的市场。

 

据统计，2017年中国外卖市场总收入达2091亿元人民币，13年至17年复合增长率45.6%。根据中国餐饮市场报告，预计2022年中国外卖市场总收入将至4770亿人民币，占中国餐饮市场的7.6%，各线城市全面开花的局面有望持续。

 

2017年外卖市场规模同比增长情况

图片来源：中国餐饮报告2018，云锋金融整理

 

当下，我国外卖业务覆盖1600个城市，马太效应明显的外卖江湖(1/4的订单来自知名品牌商家) 未来仍旧有广阔的增长空间。


海底捞2017年外卖业务增长50%，无疑是在火锅界再拔头筹。它利用人类的懒惰早早占据了先机，未来怕是还要走得更远。

  

贪婪 Greed


贪婪，也可以指永不满足。作为一个主打火锅的公司，海底捞在商业战略方面充分发挥想象力，将“贪婪”的特质发挥的淋漓尽致。


在过去3年，海底捞新增门店数量已超越之前20年的门店总数。2016年的176家扩张到2017年273家。甚至，海底捞计划在2018年新增180-220家门店，即每两天就要开设一家新店。


在境内开店风生水起之际，海底捞迅速扩张、走向海外。

 

资料来源：海底捞招股书


海底捞成立的二十余年间，在北上广等57个城市有190家直营餐厅。此外，已有台湾2家、新加坡4家、美国洛杉矶1家、韩国首尔3家和日本东京1家直营餐厅。


如果说新开分店是扩张的自然需要，整合上下游则充分显示了海底捞的“野心”和想象力。


海底捞集团业务版图

图片来源：海底捞招股书，云锋金融整理


业务线上，近几年，百亿营收的海底捞加速扩张。根据其招股说明书，募集资金的60%用于业务扩张，20%将用于技术开发，15%用于偿还贷款，而剩下的5%用于营运资金及一般用途。

 

短短几年，它的业务遍布上中下游，甚至包括了不搭界的装修和管理咨询。可以说，触手所及都深度扩展，把有可能变现的业务部门都拎到了大众视野里。

 

2016年7月，海底捞系中专攻火锅底料、蘸料的颐海国际在港交所挂牌上市。

2017年4月，冒菜品牌优鼎优在新三板上市。

 

对比将内部服务能力对外输出并独立上市的打法，如果海底捞仅作为餐饮门店存在，其价值会大打折扣。事实证明，海底捞帝国里，各业务板块都在业界建立了各自的知名度，不再是海底捞餐饮的附属品。例如颐海国际直接来自关联方（主要是海底捞）的收入仅占53.8%，其余来自第三方；来自第三方的收入增速惊人，经销商、电商业务等渠道，均录得100-400%的增速。


贪得无厌并不是海底捞的作风。基于对每一个环节的严格把控，如新店装修的速度、充足的储备店长，海底捞开店后通常1-3个月即可实现盈亏平衡。

 

海底捞的贪婪，贪而有道。

  

暴食Gluttony


大盘鸡、回锅肉、辣子鸡、烤鸭……，

 

中国人也许天生就格外喜好美食，给了餐饮市场肥沃的土壤。据统计，2017年中国餐饮行业收入超过3.9万亿元，到2020年，餐饮市场很可能有超过5万亿元规模。

 

中国餐饮市场规模

图片来源：中国餐饮报告2018，云锋金融整理

 

民以食为天的中国，并不缺乏好味道，可当今中国这个4万亿的餐饮市场，还没有出现一个麦当劳、肯德基式的千亿级别的公司。在这个讲究烹饪技法的国度，对厨师和食材的依存极高，一家餐馆可以做到远近闻名，可掌厨大师无暇顾及多家店，以至于规模化很难实现。

 

在这种环境下，最火热的品类正是最不讲究烹饪技术、相对可以标准化的火锅。根据中国餐饮报告2017数据，火锅占餐饮业总营业额22%，位列榜首，超过排名第二的自助餐近一倍。在“坐拥四万亿市场的中国餐饮行业，为什么出不了一家千亿龙头”一文我们提过，标准化是规模化的一个重要的前提。


我国饮食文化博大精深，即便是火锅也有诸多口味和类别，从小肥羊、澳门豆捞、重庆麻辣到老北京涮锅、潮汕牛肉等等各领风骚。


各类火锅占比

数据图片：2018中国火锅产业餐饮大数据研究

 

仅靠标准化，海底捞能否一招鲜吃遍天？恐怕也没有这么简单。在招股书中，海底捞也提到了，会根据地域差异对火锅口味进行调整，例如引入椰子鸡锅底等。这种差异化，对海底捞的管理，提出了更高的挑战。

 

挑战虽然在前，但民以食为天、且我国还在外出就餐增加的大趋势当中。这个趋势将伴随头部公司的集中。目前看来，海底捞是离千亿市值目标最近的中国餐饮公司。

  

淫欲Lust


在现代商业环境，lust可以引申为社交属性。脸书（facebook）的雏形，就是一个给大学女生评颜值的网站。最近风口浪尖上的滴滴，其顺风车产品意图打造的，也是社交属性。


目前，还没有看到海底捞在这方面的动作。否则，已经把握了人性如此多弱点的海底捞，岂不是让竞争者更加没有活路了？

  

结语


人性恐怕是这个世上最经不起考验，最脆弱的东西。

 

它被当作每个人的弱点、原罪，被大批特批，被试图摒弃。但同时，它也蕴藏着巨大的宝藏：任何成功的商业模式，背后都是对人性的洞悉。

 

那天，张勇走进一间会议室，里面坐满金融精英。他说："在座的各位想必都是世界名校毕业的吧。今天大家会坐在下面听我讲，肯定是我想过什么你们没想过的东西。是什么呢？人性。" 

最好的商业模式，都是针对人性的。而海底捞的每个细节，都在体现对人性的把握。

这就是为什么，海底捞你学不会。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务









评论(0) 浏览(2311)

如何让界面任务流程更清晰 ？向导式设计了解下

雪涛

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

向导式设计属于交互设计的常识，包括步骤条设计，引导标签等。本文从向导式设计的作用、使用场景、设计类型、需要注意的问题等，给你带来全面的基础科普。

一、向导式设计是什么？

软件界面设计中的「向导式界面」这个术语源自英语中的「Wizard」一词。意思为「男巫、奇才」的意思；延伸意为「向导」。向导，顾名思义，就是能带领或指引别人到达目的地的人。在实际使用中，这种交互方式的确像一个向导一样，一步步地引领用户向前，把复杂的任务进行拆解并有步骤地完成。

向导式设计也是流程设计的一种方式，这种方式通常目的性明确。在很多商业领域使用非常广泛，比如购物，酒店预订，银行业务等等，尤其适合新用户第一次体验产品时使用，让用户对产品使用和任务快速上手，节约时间，提升效率。

二、向导式设计的主要作用

1. 引导新手操作

让新用户在最短的时间内了解产品/任务，明白如何快速上手使用。

2. 纵观信息全局

让用户操作时对整体流程可控，心里有底，可以提前预估操作/完成时间。

3. 简化操作任务

对复杂任务进行拆解，提升用户操作的效率，同时也降低出错率。

4. 较少操作决策

固定任务操作路径，节约用户思考&做操作决策时间，快速完成任务。

三、向导式设计的使用场景

一般情况下，标准向导步骤条的使用场景为：2-5 步比较合适。< 2 步，> 10步，使用是不合适的。因为 < 2 步没必要；> 10 步太夸张，会吓到用户，本能认为你的产品使用过于繁琐，拒绝尝试和使用。

四、向导式设计的类型

  • 手风琴向导
  • 标准向导
  • 横向标准向导
  • 纵向标准向导
  • 弹框向导
  • Tab 栏向导
  • 标签向导

五、向导设计类型案例场景分析

1. 手风琴向导

手风琴向导式设计类型，一般适用于 2B 类后台业务数据较多，任务指向性相对明确，流程基本固定。例如用户帮助文档以及 Q&A 的场景； PC 端页面的注册引导；电商网站的购物支付等流程。

手风琴向导，除了可满足任务引导，步骤拆解，直观展示等作用；更主要的是能对大量的数据信息进行收纳整理，凸显信息层级的清晰度，并在收纳信息的同时节约页面空间，让页面更有节奏和呼吸感。

2. 标准向导 – 横向向导

横向标准向导也可以称为横向步骤条，这样表述大家比较容易理解。此类向导式设计是大家最常见的，也是最常规的一种横向向导的设计，主要作用是对复杂的任务进行拆解，按照固定顺序明确步骤，让用户对即将要操作的任务时间和内容有一个可控的心理预期。一般用户可以一目了然总览共有几步，目前每个步骤的状态（例如已完成/进行中/未开始），和自己当前的操作位置。

目前很多行业内的组件库对横向步骤条的 UI 设计基本都采用以下表现形式（图片来源 阿里巴巴 TXD-AISC 组件库），只是在细节上有稍许的差异。

具体差异主要表现在状态色彩的使用和上下图文的布局中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文布局为左图右文，这样设计的好处是，如果流程步骤相对较少时，文字也可作横向指向的一部分，避免页面太过空旷。同时 Ant Design 对步骤条的使用场景做了更多细分，除了简单的步骤条，还有迷你版和带图标的步骤条。

除了上面标准的组件库中常有的步骤条样式，还有以下的常用样式，例如电商类购物和支付的场景，除了对已完成的状态进行确认显示，色块箭头的设计，向导指引性更强。

类似上一个案例的 UI 美化升级版，其实功能原理都是相通的。

除了上面相对比较简单场景的步骤条，其实在 2B 业务中还有相对比较复杂的步骤条的设计，具体对应的是复杂的业务场景，例如覆盖多产品线参与，多角色审批，包含父子步骤审批的业务场景，简单常规的标准向导式设计是不能够满足业务场景的，需要对简化版的横向向导继续深入拓展和优化。

上面两种普通常见的横向向导式步骤条，业务场景相对更偏向 2B 中后台，风格相对保守和严谨。其实网上还有很多设计感和趣味性较强的步骤条设计，UI 风格创意十足，但原理都是相通的，具体 UI 样式详解就不再赘述。可参考作者的设计板。整体资料 UI 风格如下：

3. 标准向导 – 纵向向导

纵向标准向导也可称为纵向步骤条向导，主要使用场景为内容数据较多，需要分页/板块展现的场景，B端业务使用的场景较多；纵向向导设计陈列在左侧的目的也为了能对大量数据进行快速筛选和定位，同时此类数据之间无需进行对比查看，如下图：

4. 弹出框向导

弹出框向导设计主要使用的场景为注册页/登录页/轻量任务操作页，都在弹出框内，步骤较少，能够快速完成。如下图：

5. Tab 栏向导

Tab 栏向导其实是Tab栏+步骤条元素，组建成的一个新的横向向导模式，它的主要使用场景相对来说比较灵活，可以用在登录和注册页等轻量页面场景中，也可用在有固定任务流程的详情页面中，不过一般 PC 端的详情页会采用单独的 Tab 和步骤条展示，为让信息层级更清晰明确。

6. 标签向导

标签性向导设计主要使用在移动端居多，较少标明固定的操作顺序，但是基本的操作路径有一定的秩序在，主要使用的场景是对特定事物进行快速引导定位和查找，在众多商品类目中，快速找到自己需要的。例如浏览器的搜索和电商平台的商品分类检索，还有外卖类和旅行类对食物以及景点的查找中，都常常会用到标签向导：

六、向导设计中需要注意的问题

任务流程本身并不复杂的时候，尽量不要使用，避免弄巧成拙，画蛇添足；

每一步骤都需定义清楚，明确用户当前所在的进度节点，清晰展现此刻具体步骤及状态；

颜色不要乱用，避免产生寓意分歧和过度设计，一般情况下「已完成」采用蓝色/绿色都可以，但是需标注「已完成」 icon，「进行中」为蓝色高亮，「未开始」置灰；不过也可根据品牌色做出对应调整，避免采用太多颜色，让用户感觉眼花缭乱，不知所措；

及时对状态进行追踪&反馈，避免用户不知道自己操作是否生效，混淆认知；

任何向导设计中最好是提供随时撤销的选项，让误操作有可逆场景，给任何误操作提供返回和修改的机会。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(3061)

小程序----页面兼容h5标签

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

有时候当小程序向后台拿数据是一篇html标签的文章时，把它放进小程序会发现很多标签就不兼容，如果要一个个改又很麻烦，有没有方法可以很快地兼容html标签呢？ 
有个工具可以做到：wxParse 
这里写图片描述 
下载了它的压缩包后解压，复制wxParse文件夹放到小程序pages页面里： 
这里写图片描述 
在wxml里引入，这里的路径仅供参考： 

<import src="../../../../wxParse/wxParse.wxml" /> <view> //在需要放置html文本的地方使用wxParse模板 <template is="wxParse" data="{{wxParseData:content.nodes}}" /> </view>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

在js里引入： 

let wxparse = require("../../../../wxParse/wxParse.js");
Page({ /**
   * 页面的初始数据
   */ data: {
      content: '' },
   onLoad: function(options) { var that = this;
     ..... /**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/ wxparse.wxParse('content', 'html', result.data.content, that);
   }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    •

在wxss引入： 

@import "../../../../wxParse/wxParse.wxss";
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(2882)

比尔晴还烦人！用户最讨厌的三种UI设计方式

雪涛

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。

一、弹窗

也许你会知道这种感觉，当你打开一个新的网页，阅读到一半时，突然被一个巨大的浮层打断，要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。

这么多网站都会使用这种方式，其用意显而易见。然而，这种方式对用户产生了非常负面的影响——中断了用户正在做的事（对用户来说重要的事）并将注意力集中在另一件事情上（对网站来说重要的事）。在你试图要求获取用户信息之前，最好等用户完成当前的事情（例如，阅读并熟悉内容）。让他们有机会选择是否做某件事情，而不是强迫他们去做。

二、无限滚动

无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时，它可以一直刷出新的内容。虽然听起来很好，但这种方式并不适用于所有网站，也不是 APP 的通用解决方案。

△ 图片来源：Geo Law

这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置，他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站，他们将失去之前访问的所有进度，不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置，不仅会对用户造成烦扰或混淆，而且还会使整体用户体验变差。

2012年，Etsy 花了很多时间实现电商网站的无限滚动界面，但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化，但用户参与度却下降了（人们有目的地使用搜索的次数下降）。

正如 Dmitry Fadeyev 指出：

人们会想回到搜索结果列表中查看刚才看到的内容，并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比，也使列表上下移动变得困难，尤其是当你下次回到页面，发现自己又回到了顶部，需要再次向下滚动列表并等待内容加载。在这种情况下，无限滚动界面就比翻页慢多了。

设计师在设计中加入无限滚动之前，应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说，无限滚动适用于像 Twitter、Instagram 这样的产品，用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。

译者注：作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点：

1. 无限滚动的优点

用户停留的时间更长，提升用户参与度。当用户没有特定寻找的内容时，可以通过浏览海量信息找到自己喜欢的内容（如Pinterest、Facebook）。

滚动比点击操作更快更容易，分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好，移动设备的手势控制让滚动更自然。

2. 无限滚动的缺点

影响页面性能，加载速度慢，用户无限的向下滚动，加载更多的内容，页面的性能会越来越低。

无法定位到上一次浏览的位置，需要重新不断下拉回到同一位置。

网站右侧的滚动条变得无关紧要，反映不出数据量，当你以为快要接近底部，引诱你继续向下滚动，结果更多的内容又呈现出来。

缺少页脚，用户有时候需要查看某些信息，去页脚查看发现没有。这些信息可以展示在别的地方，或者加上「加载更多」的按钮来响应用户对更多内容的需求。

结论：无限滚动适用于用户没有特定目的的原创内容网站（Twitter，Facebook）或者视觉（Pinterest，Instagram）的网站和 app，分页则适用于用户在寻找特定信息的搜索结果列表，以及用户浏览位置重要的地方。谷歌的图片用了无限滚动，相对于文本搜索，用户可以更快地浏览和操作图片，文本搜索则需要花费更长的时间。

3. 使用无限滚动的建议

  • 当你使用无限滚动时，可以保持导航栏可见，以便于快速进入其他页面。
  • 页面需要页脚时，使用「加载更多」的按钮。
  • 为特定项目增加收藏或书签，以便于保存下来。
  • 加载新内容的时候提供视觉反馈，让用户知道发生了什么。

三、推送通知

您是否注意过每天从各种应用收到的通知和提醒消息的数量？其中您真正关心的通知有多少？

每天用户都会被没用的推送轰炸，分散日常活动的注意力，并感到恼火。

恼人的推送通知是人们卸载移动应用程序的首要原因（根据调查受访者的比例为71％）。

当用户开始使用 APP 时，如果推送内容足以让用户「愿意被打断」，他们就不会那么在意收到推送消息，换句话说，这意味着推送消息必须让用户觉得足够有用和有趣。因此，为用户推送有感染力并使之愉悦的定制化内容才是关键。

推送通知是一项特权，因为用户信任你，才允许你直接向他们发送消息，你不能滥用这个特权。

为用户设计有用，相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具，并在适当的时间和地点传递正确的信息，以促进互动。

译者注：作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点：

适当的时间。尊重当地的时间，不要在用户睡眠的时候发送通知，比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高，当用户参与度最高的时候，在下午6-8点时发送推送通知。

△ 图片来源：Andrew Chen和 Leanplum

限制次数。设置一个合理的推送次数，一些 APP 只要触发了与你相关的信息就会提醒你，过多的推送可能会引起用户的不适。

个性化定制不同的推送内容给不同的用户，推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。

发送消息之前应该确定好目标，跟踪数据，确认推送是否达到了效果。


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(2323)

JS：获取驱动器的大小和可用空间

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

亲测必须将代码放在记事本中，改成html格式，在用IE运行（必须） 




    







    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"





    "http://www.w3.org/TR/html4/loose.dtd">





    <html>





    <head>





    <title>显示指定驱动器的大小及可用空间</title>





    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">





    </head>





    <body>





    <form name="form1" method="post" action="">





    盘符：





    <input type="text" name="text1">





    &nbsp;&nbsp;&nbsp;





    <input type="button" name="Button1" value="磁盘空间" onclick="DriveSize(document.form1.text1)">





    </form>





    <script language="javascript">





    <!--





    function DriveSize(Drivename)





    {





    var fso=new ActiveXObject("Scripting.FileSystemObject");





    var s=fso.GetDrive(Drivename.value);





    if (s.IsReady)





    {





    var str,str1，AllSize=0.0;





    str="当前驱动器的名称为:"+s.DriveLetter+"\n";





    AllSize=s.TotalSize/1024/1024/1024;





    str=str+"当前驱动器的大小为:"+parseInt(AllSize*10)/10+"\n";





    AllSize=s.FreeSpace/1024/1024/1024;





    str=str+"当前驱动器的可用空间为:"+parseInt(AllSize*10)/10;





    alert(str);





    }





    else





    alert("该驱动器无效。")





    }





    //-->





    </script>





    </body>





    </html>





    运行：





    







    结果：单位为g

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。


评论(0) 浏览(2313)

7个案例解析：复选框 vs 切换开关

雪涛

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文介绍在设计表单体验时，决定这两个控件之间的指导性原则和案例分享。

表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。


复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。


切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。


点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。


在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。


下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。



案例1：即时回复


使用切换开关时，


1. 应用设置的立即响应是无需明确操作的。


2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。


3. 用户需要执行不需要审核或确认的即时操作。


Image title

如果需要即时响应的选项最好选择使用切换开关


案例2：设置确认


使用复选框时，


1. 应用设置需要在提交之前由用户确认和审核。


2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。


3. 用户必须执行其他步骤才能使更改生效。


Image title

如果需要显式操作来应用设置，则首选复选框


案例3：多项选择


使用复选框时，


1. 有多个选项可供使用，用户必须从中选择一个或多个选项。


2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。


Image title

在列表中选择多个选项，复选框能提供更好的体验


案例4：不确定状态


使用复选框时，


1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。


Image title

使用复选框最好地显示不确定状态


案例5：清晰的视觉状态


使用复选框时，


1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。


2. 需要提供明确的勾选状态或未勾选状态。


Image title

有时切换开关不能清晰地显示它是状态还是动作


案例6：相关项目


使用复选框时，


1. 用户必须从相关项目列表中选择选项。


Image title

用复选框显示要选择列表中的相关项


使用时切换开关时，


1. 用户切换独立的功能或行为。


Image title

独立项目可使用切换开关进行选择


案例7：单选项


使用复选框时，


1. 提供单个二进制是/否选择。


2. 只有选择或取消选择一个显而易见的选项。


Image title

单个是/否选项更适用于复选框


使用切换开关时，


1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。


Image title

使用切换开关可以最好地理解单个开/关决定


结论


重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。



参考文献


1. Control and Patterns《控制和模式》


2. When to Use a Switch or Checkbox《何时使用开关或复选框》


3. Selection Controls《选择控制》


4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

 

评论(0) 浏览(2817)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档