首页

被惯性思维牢笼禁锢的产品色彩“方法”

资深UI设计者

也不知道从什么时候开始，我们给颜色定了性

不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后以后这家餐厅火爆了，王境泽都觉着香的不行…


听完这个故事，自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段，在9年义务教育的美术课本上，我得到了有生以来第一次对色彩这门学问的细致输入，了解到了各种颜色对应的含义与情绪：

这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭，直到有那么一场面试或者汇报，面试官/老板问我，“为什么你要选择这个颜色作为品牌色呢？”

面对着一手塑造出来的社交应用，我解释到：“因为红色代表着热闹，这个颜色会赋予这款产品热闹的氛围”。坦诚的讲，这个解释自信但空洞，颜色本身并无好坏和指向，只看你用在了什么地方，不讲究场景就别轻易定性。

这也侧面反映出来惯性思维的不断吞噬着你我的思路，过往的“经验”可以让人习以为常，也可以让人尴尬不已，取决于是否洞察的到。如果抛弃惯性思维，到底如何去定义一款产品的主色呢？


STEP 1


说实话选取一个颜色作为品牌色是一个战略决策过程，一般来说行业里一定存在一种主流颜色，像旅游行业的携程/去哪儿和途牛，还有以淘宝为代表的电商行业通常是喜庆的大红大橙。

显而易见基于这个逻辑下，有3个做法，一条路是顺势而为，一条是逆向而去，还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的，需要结合整个业务的方向去判断；在旅游行业里马蜂窝选择了逆向而去，在直播行业里抖音就选择了另辟蹊径。

我们试着揣测下抖音和马蜂窝的想法，在产品的定位和策略的打法上，他们更注重的是差异化，走反方向的路突出品牌，试图在用户的心里站得住。通过这个例子你或许会发现，黑色未必死气沉沉，ta也可以色彩斑斓；黄色未必只象征尊贵，ta也可以代表青春和希望；颜色没有偏向，只看使用在什么场景上。


主色的选择更需要贴合业务战略的发展，也更多的偏向于主观。给业务提供思路和方向，判断不好业务方向的时候，多提供思路帮助其更好的匹配颜色。


STEP 2

以往的面试里，我这种好事的面试官就特别喜欢问侯选人一个问题：“一个色相里有那么多色号，为什么你定了这个色号作为品牌色？”大部分候选人乍一听都是面露难色，心里大概想着这人是个傻X吧，能问这种问题，哈哈哈哈哈哈；废话不多说，我来简单分享下我的方法：


首先以黑白两色（#000000-#FFFFFF）作为起始点设置10个梯度，然后把第一个模块定义的色相扔进去，只需要调整HSB中的H就可以，这样一顿操作下来你就得到了一个完整的色彩序列：

第二步，基于序列主观调整下颜色，确定主色的同时确保其在黑白2种背景上对比度大于4.5：1（wcag色彩可用性标准），理论上来讲梯度中间是最合适的，饱和和亮度足够就可以。

上图是我用到的色彩可用性测试工具-color review（https://color.review/）


STEP 3

当你准备好了以上所有工作，最后一步就是拓展色系了；这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作为主色并结合下google的方法开始拓展色系。

首先 - 确认同色系辅助色：我们将主色的色相加减 30° （谷歌是以10为梯度，但色相变化不大，为了效果我们以3倍作为最小单位）获得2个新颜色，即同色系辅助色。

其次 - 确认对比色辅助色，将主色的色相加上 180° 获得其互补色，即对比色系辅助色。为了和主色的类似色对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。

根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色；同理你可以推理出无色彩倾向的中性色系（这里就不展开赘述）。


最后你可以通过编码的方式，赋予每个颜色一个token（密钥），方便团队的配合和使用。

以上就是我在选取色彩的大概思路，市面上也有很多讲颜色的好文，分享大家一波：

Ant Design 色板生成算法演进之路 - https://zhuanlan.zhihu.com/p/32422584

设计系统色彩 -https://uxplanet.org/designing-systematic-colors-b5d2605b15c


总结一下

随着工作经验/时长的不多增加，我们往往会对事物的存在习以为常，思维的惯性会困住我们追根溯源的想法，但需求和场景是千变万化的，所有的方法也都针对的是通用场景，标准化的解决方案未必适用你当下的处境；试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。

但需求和场景千变万化，实际操作不能那么程式化，最终还是要回归到具体使用场景去定义，文章里面的规则和公式只是指导，在必要的时候可以打破。

文章来源：站酷   作者：负能量补给站

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


评论(0) 浏览(2040)

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

资深UI设计者

你一定知道“摩尔定理”，对许多IT人而言那是这个行业最基础法则，然而，在我看来，另一个和摩尔定理齐名的“梅特卡夫定律”被严重地低估了。

和摩尔定理指出硬件性能进化逻辑不同，“梅特卡夫定律”在业务层面对互联网时代的发展规律进行了高度概括的总结，这个抽象总结在过去、现在和未来都会继续指引互联网的发展方向。

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

什么是“梅特卡夫定律”

“梅特卡夫定律”的表述非常简单——一个网络的价值和这个网络节点数的平方成正比，用公式表述就是：V=K×N²，其中V代表一个网络的价值，N代表这个网络的节点数，K代表价值系数。

那么，这个看似极其简单的公式为什么会受到互联网人如此高度的推崇呢？

在回答这个问题之前，我们还是简单来了解一下“奇人”梅特卡夫：

罗伯特·梅特卡夫1946年出生于纽约布鲁克林，年轻时的梅特卡夫是一个标准的学霸，在麻省理工获得了工程学和管理学的双学位，之后又在哈佛获得了博士学位，毕业后他迅速加入了当时的科技巨头施乐。

在施乐工作期间，他发明了当今局域网使用最广泛的协议之一——以太网，这让他年纪轻轻就一跃成为“计算机先驱”。

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

△ 梅特卡夫于1973年绘制的以太网草图

然而年轻的梅特卡夫并没有躺在这一成果上坐吃山空，而是在人生33岁的时候决定把自己掌握的技术转变成商业产品，1979年，他创办了著名的3Com公司。

3Com公司是做什么呢？通讯基础设施，你可以理解为美国的华为（事实上3Com后来还和华为成立过合资公司）。在管理3Com公司销售团队的时候，梅特卡夫发现当时客户对他们的主力网卡兴趣不大，这时候他展示了自己作为技术人超强的逻辑说服能力，他亲自制作了一张幻灯片，画了一张图，列出了网络价值和成本之间的关系。

他想通过这张简单的图清楚地说服客户——买网卡的成本随着时间是线性增长的（N），但网卡构成的网络价值则是呈指数级增长的（N²）。言外之意就是你们现在买网卡会觉得不划算，但随着买的人越来越多，它的回报将是指数级的。

作为3Com公司的头号推销员，梅特卡夫在美国科技界的各个场合都在宣传他的这一理念，这引起了一位叫乔治·吉尔德的科技专栏作者的注意，吉尔德长期在科技界浸润，直觉告诉他这页其貌不扬的PPT里可能藏着一个极具价值的判断。

1993年，乔治·吉尔德在《福布斯》杂志上系统地阐述了梅特卡夫的关于网络价值指数增长的理念，即幻灯片里那条指数增长的曲线，并把它命名为“梅特卡夫定律”。

当时美国互联网刚刚萌芽，各类网站都在快速增长，吉尔德的总结让“梅特卡夫定律”被科技界和互联网圈逐渐接受。不久之后，美国联邦通信委员会主席的里德·洪特（Reed E. Hundt）说：“摩尔定律和梅特卡夫定律”为我们提供了理解互联网的最佳角度。

而之后马克·安德森创立了Netscape，发布了网景浏览器，用户数一路狂奔，安德森在总结网景的飞速发展时，称“梅特卡夫定律是一盏明灯”。随着互联网在美国强势崛起，这个起初描述硬件网络价值的定律被外延到了整个互联网领域。

无数网站的创始人将梅特卡夫定律写进了他们的商业计划书，它在一定程度上成为无数互联网创业者和从业者的信念灯塔。

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

△ 3COM公司曾用于销售推广的幻灯片（梅特卡夫展示原稿）

“梅特卡夫定律”的意义

事实上，“梅特卡夫定律”在数学上是有意义的，一个N个节点的网络，它的总连接数为N（N-1），当N足够大，它接近于N²，如果把网络里的连接数直接看成是网络的价值衡量指标，则“梅特卡夫定律”是一个完全成立的等式。

那么，在现实中是否是真的这样呢？

2013年，梅特卡夫本人在《IEEE计算机》上发表了一篇文章，用Facebook从10年的实际数据证明了自己的定律符合Facebook现实中的成长轨迹。

有趣的是，同样在2013年，来自中国科学院的三位作者张兴洲、刘景洁、徐志伟也在著名的《计算机科学与技术》杂志上也发表了一篇名为《Tencent and Facebook Data Validate Metcalfe’s Law》的论文。论文中用腾讯和Facebook两个公司的数据验证了它们的月活数据和它们各自的估值（市值）是符合“梅特卡夫定律”的。

正是由于“梅特卡夫定律”的存在，让无数互联网人对规模和增长前仆后继，因为他们深刻地理解，规模能带来指数级的回报，这一回报通常会超出正常的预期。

事实上，梅特卡夫定律的确在解释无数互联网案例时都有着极强的说服力，举一个简单的例子：为什么5G成为科技竞争博弈中关键中的关键？

原因是其背后指数级的价值——第一代互联网接入的PC存量设备数大约是10亿台，第二代移动互联网接入的智能手机存量设备数大约为30亿台，而5G成熟之后的IoT物联网时代，接入的数据保守估计将达到500亿台，根据梅特卡夫定律由此产生的指数级价值是极其惊人的，某种意义上，这也是美国一定要封杀华为背后的重要逻辑。

  • 为什么滴滴、快的、Uber的打车战争会如此惨烈？
  • 为什么近些年流行行业老大合并行业老二？
  • 为什么自媒体的头部玩家会享受到这个行业最的回报？
  • 为什么操作系统市场通常很能容下二个以上的玩家？…..

这些问题都可以隐约在梅特卡夫定律中找到答案。

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

“梅特卡夫定律”的争议

尽管“梅特卡夫定律”对互联网的影响巨大，但业界依然对这个定理本身提出了不同的看法。

2006年7月一位名为鲍勃·布里斯科的研究员就在《IEEE》上发表了一篇态度鲜明的文章——《梅特卡夫定律是错误的》，他旗帜鲜明地指出梅特卡夫定律根本缺陷在于对网络中的所有连接都赋予了相同的价值。

“梅特卡夫定律”其实背后有两个隐藏的假设——第一，网络的机制取决于网络之间互相连接数的价值之和；第二，每一个连接的价值是相同的。

布里斯科的这篇文章并没有质疑第一个假设，而是质疑了第二个假设，在他看来，网络中的连接的价值并不是同等重要的，连接也分强连接和弱连接，弱连接的价值显然就没有强连接那么大。甚至他还引用了作家梭罗《瓦尔登湖》里的一段话作为论据——“我们急于建造从缅因州到德克萨斯州的磁电报，但是缅因州和得克萨斯州之间和其他人口更多的州相比可能没有什么重要的交流。”

没错，上述对梅特卡夫定律质疑从理论的角度是合理的，从现实中观察，我们也看到了和梅特卡夫定律相悖的现实，我随便举一个例子：一所精英大学本来一年招1000人，如果它扩充到2000人，它的价值和影响力会不会变成原来的4倍呢？

大概率不会，这是很容易理解的，因为这个实际例子和梅特卡夫定律的理想设定显然有不相符的地方——

  • 第一：大学的价值和影响力并不直接由网络中的连接数决定。
  • 第二：多一倍的学生并不意味着他们会自动跟所有学生建立联系。
  • 第三：扩招之后的学生质量大概率也会下降，因此连接的价值本身也可能下降。

很显然，梅特卡夫定律在具体的情况中并不能直接生搬套用，但我们又的确观察到了腾讯和Facebook的数据完美地证实了梅特卡夫定律。

那么，应该如何理解这种悖论呢？

在我看来，Facebook人数的增多，很显然连接的质量是不同的，同时新加入的人也不可能和所有人建立连接，但我们可能忽略了规模带来的其他外部效应——比如人数足够多之后的边际成本降低，再比如人数足够多之后的数据积累也会提高一个量级等。

所以，“梅特卡夫定律”更多的是对一种现象的抽象，直接在任何互联网产品中生搬硬套都是教条的。正如经济学的基础建立在“理性人”这一假设之上，但实际中人却不总是理性的，事实上对于“理性人”假设的质疑诞生了许多有价值的新经济理论。

另一个非线性增长的模型——齐普夫法则

有趣的是，鲍勃·布里斯科在论述“梅特卡夫定律”可能漏洞的同时，提出了一个新的描述网络价值和网络成员的法则——齐普夫法则。

它以语言学家齐普夫命名，齐普夫在20世纪早期发现英文中词频的规律——最常用的”The”占所有英文文本的7％，第二常用的单词”of”占比则3.5％，第三位的”and”占比为2.8％…….符合7%的1 倍、1 / 2倍、1 / 3倍……这一规律。

这一规律用数学公式抽象为V=k*n log（n），既价值和数量呈对数关系。

齐普夫法则是描述价值和数量更温和的模型，举个例子——假如一个网络10万人的时候价值100万，如果增加到20万人，根据梅特卡夫定律，它的价值增长到400万，但根据齐普夫法则的计算，它的价值则只增长到210万，注意，210万依然比200万这一线性增长的价值要更高。

所以，尽管鲍勃·布里斯科指出了“梅特卡夫定律”可能存在的缺陷，但他却承认一个网络的价值和成员之间的关系并不是线性增长的，齐普夫法则也是一个非线性增长的模型。

这两个模型都指向了一个原则——网络的连接规模的提升带来的回报是超预期的。

那么现实世界中哪个模型是对呢？或许这个问题并没有答案，但它们却从不同的层面给了我们理解这个真实世界的角度。

这正是商业世界有趣的地方，和严格的数学、物理学不同，商业世界的规律的适用受无数约束条件的控制，我们只能尽可能掌握在大多数情况下都适用的规律，一定要拿出一个反例去反驳一条在大部分场景都普遍适用的商业规律其实没有意义。

被严重低估的法则：指引未来互联网方向的「梅特卡夫定律」

所以，总结一下，梅特卡夫定律是对网络指数增长的普遍规律的一种抽象，它告诉我们一个简单的道理——规模的意义比你想象的更加的重要。

作为互联网人，我们需要深刻理解梅特卡夫定律所代表的一种指数级增长逻辑，尽可能建立更多的连接，从而在这个不确定的世界更好地生存。


文章来源：优设   作者：卫夕指北

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


评论(0) 浏览(2070)

微交互：设计师的超能力

前端达人

微交互在用户体验中占据越来越重要的位置，来看看微交互该如何应用吧～

大概几周前，在他的朋友和孩子们的大力劝说下，我并不那么精通互联网的爷爷加入了Facebook。最后。在我教他设置个人资料，创建帖子和后续页面时，他遇到了一个有趣的事，在尝试摸索页面中不知何故偶然发现了著名的LIKE按钮。他将鼠标悬停在“赞”按钮上，弹出了6个表情符号，然后单击“ HAHA”笑脸，这使他对这个小动画感到敬畏。这就是微交互对产品或应用程序的强大功能。


资料来源：Giphy


我们作为用户，每天都能看到和应用这些微交互，有些甚至没有意识到。“喜欢”按钮是最简单的示例之一。其他几个是：

  • 滚动鼠标时出现的简单滚动条

  • 向左滑动即可清除iPhone主屏幕上的通知

  • 能够看到其他人在消息传递应用程序上“打字”

  • 一个进度条显示下载百分比

  • 拉动以刷新，以在应用程序屏幕上重新加载内容

  • 交互式错误页面，例如Google Chrome和为文章点赞是一些最常见的微交互。那么，为什么这些非常有效？为什么每个应用程序都有它们？


资料来源：Dribbble

一.什么是微互动？

微交互就像与设备的任何其他交互一样，用于将有意义的反馈传达给用户，因为用户必须不断知道执行某项操作时会发生什么。这是一种人们期望发生某些事情的趋势。例如：单击按钮，滚动页面，将商品添加到购物车，向左滑动卡片。

资料来源：Dribbble

这通常是通过提供系统状态（尼尔森的启发式方法）或帮助用户避免常见错误来实现的。当您未填写必填字段时，带有错误消息的红色边框就是微交互。


例如看下面的互动

竖起大拇指— Facebook Messenger


该动画是微交互的一个很好的例子，因为它实现了三个重要功能：

  • 沟通状态并提供反馈

  • 增强直接操纵感

  • 帮助人们看到自己行动的结果


二.微交互的构成

分解

微观互动包括四个部分：

  • 触发器启动微交互。触发器可以由用户启动或由系统启动。

  • 在用户启动的触发器中，用户必须启动一个动作。

  • 在系统启动的触发器中，软件检测到满足某些资格并启动操作。

  • 规则确定了触发微交互后会发生什么。

  • 反馈使人们知道发生了什么事。发生微交互时，用户看到，听到或感觉到的任何东西都是反馈。

  • 循环和模式决定了微交互的元规则。当条件改变时，微相互作用会发生什么？


三.微交互的作用

如果微交互仅仅是微小的设计元素，为什么还要关心它们呢？

很多Web开发人员和设计人员还在问这样一个问题。注重细节是一个优秀网站与普通网站的根本区别。 这些就是使用微交互的原因：

  • 他们改善了网站导航

  • 它们使用户更轻松地与您的网站进行交互

  • 他们向用户提供有关已完成操作的即时和相关反馈

  • 他们给您的用户提示

  • 他们交流有关某些元素的信息，例如是否互动

  • 它们使用户体验更有意义

  • 他们鼓励分享，喜欢和评论您的内容

  • 他们引起用户的注意

  • 最后，它们只是使您的网站更具情感性


精心设计的微交互是用户关心的明显标志。这就是为什么他们如此重视。用户可以做什么，以及他们的行为是否正确并得到系统的批准-应用程序或网站可提供即时的视觉反馈，并教会用户使用系统。

正确进行微互动后，它们往往会给您的品牌带来积极的感觉并影响用户的行为，而人们甚至根本没有意识到为什么这样做。如果您喜欢或不喜欢产品的某个方面，则通常对产品有正面或负面的倾向。这种所谓的“哈洛效果”既可以支持您也可以对您不利。在明智的情况下，这些知识可以帮助改善用户对您网站的反馈-通过适当注意细节，可以使用户满意。


四.什么时候使用微交互

在UX / UI世界中，尽管微交互非常微小，但与用户进行交流时却是强大的动力。以下是最常见的微交互及其对用户体验的影响：


轻滑

“轻滑”动作消除了轻击，并且更具交互性和流畅性。它可以帮助用户在选项卡之间快速切换并获取有关产品的更多信息。此外，轻滑是一种非常常见的手势，可以在不引起用户思考的情况下潜意识地引导用户。就像我们一直在读“不要让您的用户思考”一样，既有趣又令人上瘾。


数据输入

我们所有人都知道设置密码或创建帐户的麻烦。这个动作很容易引起用户反感。关于密码强度和用法的前瞻性建议可以使用户轻松前进，而在输入数据时进行一些交互也可以使用户参与该过程并有助于实现目标。


动画

动画可以简单地启用并改善微交互。他们的存在可能不会被注意到，但是缺席给每个人造成了损失。它们就像胶水一样，可以帮助设计师使最简单的过程变得有趣和令人上瘾。但是要非常小心，因为它们意在吸引用户，而不会使他们分心或沮丧。延迟处理或在网站中引入新样式可能会引起混乱。


当前系统状态

必须使用户了解网站或应用程序上当前发生的状态，这一点很重要。如果不通知用户，他们将很生气并关闭网站或应用程序。微交互使用户可以准确地知道发生了什么，完成该过程需要多长时间等。即使失败消息也很幽默，但有效地保持了用户的信任。


使教程变得有趣

每个人都在不断寻求信息。借助微交互功能的教程通过简化和突出显示基本功能和重要控件以方便用户理解，从而指导用户进行应用程序的工作。


号召性用语

微交互实质上是在推动用户与应用程序或网站进行交互。号召性用语给用户带来了成就感，也给用户行为灌输了同理心，使用户与CTA互动的最佳方法是使CTA吸引用户的兴趣。


动画按钮

通过让用户知道他们通过您的应用程序或网站的方式，它们起到了信息管理器的作用。我们需要注意颜色、形状、特殊效果、动画、位置和纹理，以使用户体验自然而顺畅。


滑动手势

通过使用手势隐藏一些动作项，这些类型的交互可用于节省移动设备上的空间。例如，您可以看到向左滑动将删除电子邮件，向右滑动将存档电子邮件。同样，在锁定屏幕上取消/清除通知。

快速操作

一个简单的快速动作示例就是，当您点击并按住应用程序图标时，在Apple设备上进行3D触摸，它将为您提供用户最常使用的上下文动作项。这样可以节省点击次数和时间。例如，Instagram会呈现诸如相机、新帖、活动等动作。


交流信息

这些类型的交互会分解复杂的信息，并使用视觉，动画将信息轻松传达给消费者。一个完美的例子是解释信用卡上的利息费用。这是一个敏感的话题，Apple Card通过使用圆形互动动画来告知用户和最高费用，再次赢得了客户。


互动参与

有时，您希望用户通过使他们感到惊奇的方式来与界面进行交互。这种令人惊讶的结合动作会更加产生更强大的影响。Robinhood App最近发布了一张借记卡，其候补名单超过一百万。要在候补名单中上移您的位置，用户可以转到其应用并点击该卡（最多60次）。这是使用户与应用程序交互的一种有趣方式。

提供反馈

在用户触发某些内容或输入某些内容之后，Motion可以有效地用于向用户发送反馈。错误状态和成功状态就是这些示例，下面是移动应用程序正确和不正确密码输入的示例。

向用户介绍界面

每当启动具有精美功能的新产品或应用程序时，如果用户发现它太难理解，它终将失败。因此，在此类情况下，应用程序可以利用微交互来向用户介绍功能。例如，N26 Fintech App使用动画来演示用户如何将钱从一个储蓄桶转移到另一个。


引起用户的注意

当移动屏幕上的大部分空间都充满信息时，很难突出显示我们希望用户注意到的特定功能。通过使用动画和过渡效果，微交互可以在为用户带来愉悦感方面发挥至关重要的作用。例如，在Slack上，在您开始键入之前，发送按钮变灰，一旦开始键入，它将变为蓝色，向用户指示这是号召性用语按钮。


使加载屏幕有趣

大多数加载屏幕都很无聊，但是微交互和动画可以将它们变成非常有趣的东西。每当加载或设置过程中有等待时间时，Google都会利用此空间为其用户创造出色的直观体验。这是一个例子：


我们人类一直在努力寻求即时满足。在更大的事物方案中，忽略微交互是一种普遍的趋势，但不可否认微交互对于保持用户对产品的兴趣和好奇非常重要。每个人都说细节就是魔鬼。小小的体验和设计功能（例如在屏幕之间切换或突出显示功能或弹出新通知）可以在增强用户体验方面产生巨大差异。


五.如何设计微互动？

进行微交互对于设计师来说是令人兴奋的，因为可以尝试新的设计解决方案并寻找使用户感到惊讶的新方法。但是为此，您必须牢记以下几点：

  • 把自己放在用户的角度考度，并使用所有您要弄清楚他们如何使用您的应用程序。

  • 创建功能动画。不仅具有美学效果而且能够增强用户体验的动画。

  • 让用户保持愉悦。用户使用该应用程序时的感受是其不断使用该应用程序的原因。如果用户喜欢并感到愉快，他将再次使用产品。

  • 不要打扰到用户。过多的动画会对用户产生相反的影响。令人讨厌的用户使他们远离您的应用程序。

  • 使用人类语言和非技术性语言。有趣的文案可能会让用户暂时忘却应用程序中空白页面的沮丧。


六.设计微互动的工具

那么，设计人员应该熟悉哪些原型制作工具？那里有很多工具，但并不是每个人都知道哪种工具最适合特定的微交互任务。根据我个人设计这些元素的经验，以下是我的建议。

如果你熟悉编码：

  • 手机：Xcode，Android Studio

  • 手机或网页：Framer

  • 网页：CSS动画

如果要创建更详细的交互：

  • Principle，Adobe CC，origami Studio和Protopie

如果要创建详细的交互+动画：

  • After Effects




转自：站酷

作者：ZZiUP 

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

评论(0) 浏览(2231)

以用户体验之名，谈谈企业协作平台的产品设计

前端达人

从雇佣关系看企业级协作产品的设计理念和原则

今年的新冠疫情突发，让企业级协作产品的赛道热闹了起来。前有钉钉，企业微信，后有飞书带刀入场，其他厂商看了眼红，赶紧行动起来，所以在这片一眼望不到头的草原上，你还能看到百度的如流，美团的大象，网易的popo等等。

如今疫情控制的结果也算喜人，经过大半年的时间的市场锤炼，现在这些个企业协作平台也需要被怀揣着审视的目光来看看接下来要走的路。

按照公司的要求，我在工作中频繁的使用到“钉钉”这款产品，接触的这4年多时间大概也就是企业协作平台的发展史了，我试着总结了一下：

起初产品设计的初心也许仅仅是为了员工之间的交流，依托公司的组织架构，不需要在添加好友/通过验证之类的繁琐流程直接沟通，有事说事贼方便。特别是消息回执（就是被万人唾骂的“已读未读”）更看出来了钉钉对沟通“效率”的重视。

坦诚的讲，钉钉这点我很认同，我自己也是一名用户体验设计师，过去做企业级应用的核心就是围绕 “效率”去做的，始终把用户路径的长短作为我个人无形的KPI，面试跟人吹牛X的时候也是举例说的这些。

但B端的设计就仅仅是所谓的“效率”么？唯效率的设计就一定好么？


01 效率的背后也许是姿态的倾斜


你有没有不想打开钉钉（甚至某一时间想卸载掉）的冲动？阿里巴巴当初推出钉钉这个在线办公协同产品，出发点是为了方便企业内的办公协作，沟通记录、文件资料、流程审批、员工名录等都能有效得到管理，防止丢失并随用随取。


后来味道变了，以“钉一下”为例，发起者可以无限次的对接收者发送信息并以“增强提醒”语音的方式提示。看的出来，这种交互设计本着触达无障碍去做的，但却忘记了设计使用门槛，从而造成了“谁有事谁牛X的局面”，如果沉下心来研究，会发现在这过程里情绪的变化是及其明显的：

企业管理学里有一条著名的学说“峰终定律”（后被广泛应用到用户体验领域里），大概是意思是：“在一段体验的高峰和结尾，体验是愉悦的，那么对整个体验的感受就是愉悦的”。

那么钉钉的这些个机制可能就是峰终定律的反面教材了。每一个企业级协作平台企业都在标榜自己的创新和功能的全面，殊不知这就是典型的通过产品功能机制进行的微观管理，间接加剧雇佣关系的僵持。甚至一定程度上变成了控制…员工和企业的关系我不好说，但这些企业协作平台真真实实的在彼此关系上扫满了盐。


02 固化的设计理念


翻看了众多大厂的B端设计原则和设计理念，无一例外，所有的被沉淀下来的“原则”几乎都是“效率”，甚至一提到跟B端相关的设计就永远是“效率！效率！！效率！！！”：

以效率为核心的设计帮助任务流更的完成，就这点无可厚非，我自己也是一名用户体验设计师，过去做企业级应用的核心就是围绕“效率”去做的，始终把用户路径的长短作为我个人无形的KPI，面试跟人吹牛X的时候也是举例说的这些。


然而不同于C，企业协作平台是企业要求员工统一使用的协作产品，为了方便信息集中管控，绝企业员工被迫通过一次学习后逐渐转为不用动脑子的肌肉记忆。B端员工只想要“干完活”，C端的“图新鲜”是发自内心的去找乐子。所以当被强迫完成任务的情况下，大部分情况下是一个伪命题。


03 设计原则要讲究“真人性”


通过审视的目光去看当下的设计原则，企业级协作平台经历了起始期的“沟通刚需”和发展期的“功能堆叠”后，未来应该多考虑“员工与组织”/“员工与企业”的大命题，希望是以“桥梁”的姿态出现，以帮助双方更好的完成工作为目标去设计：

这其中有两点需要着重注意：

1. 效率从人性出发

先说个题外话，过去，我们在求职时期的路径大概率是到某几个招聘网站上挨个填写个人信息/工作经历/获奖情况，但伴随着 OCR技术成熟，一个word/pdf上传，自动识别了所有信息，帮助企业和候选人大幅的解放了劳动力。与之类似的是：日报周报月报，除了工作总结偏脑力劳动需要人工产出之外，工作内容这种条目的列举完全可以帮员工包办了，毕竟钉钉上记录了大量的工作文件和日志。单靠一个周报模版丝毫解决不了问题。

2. 情感化设计不能只停留在表象上

之前跟钉钉的设计师有过情感化设计的交流，对方对情感化的理解更多体现在人文关怀上，特别是在打卡这个功能上，超过几点下班打卡后会有一句暖心的话激励员工。对此我还是保留意见，理智支撑我不许叫这个设计为情感化设计，因为美好的文字和漂亮的图形都只是表象而已，并没有帮助用户解决问题，所以顶多就是图形设计，说的好听点是graphic design。

我理解的情感化，从始至终要以解决用户问题出发，与其有时间画画漂亮的图形，不如去做业务的横向打通，帮助在深夜快点打车回家来的更实在。


总结一下


总的来说就目前国内像这种B端企业级应用真的还就是处在功能打通的阶段，未来去balance雇佣关系的大局面市场还是很大的，从这个角度来看这个赛道还有的一拼，期待更多的大厂入场来改善僵持的雇佣关系。



转自：站酷

作者：负能量补给站 

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


评论(0) 浏览(1945)

UI界面设计常见的布局构图

前端达人



构图是指作品中艺术形象的节后配置方法。是造型艺术表达作品思想内容，并获得艺术感染力。在视觉艺术中常用的技巧和术语，特别是绘画、平面设计与摄影中。在UI设计中，构图的主要作用是：构建和谐稳定的页面布局。



1.1 最平衡的构图对称构图1:1 

左右对称上下对称的构图，一般不会有太大问题，因为人类对世间万物的观察来看，因为在生活中绝大多数的事物都是对称的。


对称平衡的形态在视觉上有自然、均匀、协调、整齐、稳重的美感，复合用户的视觉习惯。



“对称构图”是将版面分割为两部分，通过设计元素的布局让画面整体呈现出对称的结构，具有很强的秩序感，给人安静、严谨和正式的感受，呈现出整齐、平稳、经典的气质。在得物（毒）中应用体现平台的核心正品与品质。



1.2 设计中不平衡原因

视觉错觉是指人们对外界事物的不正确的感觉或知觉。最常见的是视觉方面的错觉。产生错觉的原因，除来自客观刺激本身特点的影响外，还有观察者生理上和心理上的原因。其机制现在尚未完全弄清。



（1）缪勒—莱尔（Maller-Lyer Illusion）错觉：1989年由缪勒一莱尔（F．Muller-lyer）设计，末端加上向外的两条斜线的线段比末端加上向内的两条斜线的线段看起来长一些，其实两条线段等长。

（2）艾宾浩斯错觉（Ebbinghause Illusion）：看起来左边中间的圆比右边中间的圆大—些，但实际上这两个圆的大小相同。

（3）庞佐错觉（Ponzo Illusion）：中间的四边形是矩形，而不是顶边比底边宽的四角形。

（4）厄任斯坦错觉（Ebrenstein Illusion）：中间矩形的四条边看起来是弯曲的。

（5）黑灵错觉（Hering Illusion）：中间两条线是平行的，但看起来是弯的。

（6）菲克错觉（Fick Illusion）：垂直线段与水平线段等长，但看起来垂直线段比水平线段长。

（7）冯特错觉（Wundt Illusion）：中间两条线是平行的，但看起来是弯的。

（8）波根多夫错觉（Poggendoff Illusion）：被两条平行线切断的同一条直线，看上去不在一条直线上。


1.3 不平衡中的平衡构图

在整体的页面平衡的情况下，同样还需要考虑视觉上的平衡。


任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一个元素有某总视觉联系，而这个视觉联系往往是看不到却可以感受到平衡感，在平面海报中的平衡原则得到了最大的应用。



如上图所示，三少爷的剑这个海报设计，将整个海报布局进行几何化分析，地面为一个倾斜的平面，人物为一个垂直于地面的一个个体，人物上方为主体文案。几何化后如同一个倾斜的斜面放置了一个倾斜的天平，最后一个“剑”字、与下方英文如在右倾斜天平上面的一个稳定的砝码。然而整体还是不够平衡，设计师通过燕十三的视觉视线、以及围绕他的杀手用剑指向他的方向为力的方向将整个页面进行平衡。通过用剑多少占比、字体大小等等的细节使得整个页面达到最微妙的平衡点。这样的设计之后达到一种平衡而有不平衡的微妙感觉，不平衡感体现整个页面的“ 动 ”武侠之感油然而生；而平衡感表达了整个页面的“ 静 ”冷冷的肃杀感、高手的寂寞感油然而生。



让设计中的视觉要素在画面中页面平衡。可以通过字重、颜色、形状、线条、图片占比等等，这样可以增加整体页面的平衡感。通过小米中的构图可以看出上方所有图片文字偏左，通过右方一个高亮的按钮进行平衡感的设计；下方文字左边文字较少用重的深色的字体，而右边文字较多用轻且浅的文字这样的设计达到整个页面的平衡感。



2.1 黄金分割设计法 

黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。



设一条线段AB的长度为a，C点在靠近B点的黄金分割点上，且AC为b，则b与a的比叫作黄金比，黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，这一比值能够引起人们的美感，被认为是建筑和艺术中最理想的比例。 

画家们发现，按0.618:1来设计的比例，画出的画最优美，在达·芬奇的作品《维特鲁威人》、《蒙娜丽莎》、还有《最后的晚餐》中都运用了黄金分割。



UI页面设计中的黄金分割比的应用有很多如上图所示，页面整体功能摆放位置，遵循黄金分割比的分配表达出来整体页面更加的和谐聚焦。


2.2  九宫格设计法


九宫格构图有的也称井字构图，实际上属于黄金分割法的一种形式。就是在画面上横、竖各画两条与边平行、等分的直线，将画面分成9个相等的方块，在中心块上四个角的点，用任意一点的位置来安排主体位置，就是九宫格构图。



实际上这四个点都符合“黄金分割定律”，是表现画面美感和张力的绝佳位置。当然在实际运用中还应考虑平衡、对比等因素这种的构图原则在海报以及摄影中有着极大的使用。



3.1 UI页面布局的格式塔原理 

格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。



创始人提出的5项基本原则：简单、接近、相似、连续、封闭。


3.2 简单几何构图法

简单原则就是具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。我们的眼睛在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。



简单阅历暗合构图法则，例如常见的三角形构图，均衡构图，对阵构图，向心式构图，对角线、x型构图等，其目的都是为了在复杂的信息环境中，构建更易懂的整体。


3.3相似构图法

相似原则指的是在某一方面相似的各部分趋于组成整体，强调内容。而接近强调位置。人们通常把那些明显具有共同特性（如形状、运动、方向、颜色等）的事物组合在一起。



由上图可见，当用户看到这个这个页面的时候，会自觉的把上面5个icon看作一个整体，因为他们的颜色形状都是相同的；文字颜色与字体大小相同会被自然的看作成为一个相同的功能，如同样的红色都是价格，同样的黑色都是商品名称；相同的汽车图片直接清洗的都可以归类为同列表商品。


3.4接近构图法

单个视觉元素之间无限接近，视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体，而单个视觉元素的个性会减弱；



相关元素会尽量接近，不相关的尽量远离。这种构图它强调化繁为简，去除一切与内容无关的装饰性元素，突出内容本身，好让重要的信息及功能更容易被关注，让用户增加更清晰和直观地进行浏览。在这种排版设计中，您几乎看不到区分内容的分割线，他通过大间距完成了视觉层次的划分，留白是它们最大的武器。



彼此相关的项，归组在一起。如果多个项相互之间存在很紧的亲密性，他们就会成为一个视觉单位，而不是多个孤立的元素。这样有助于组织信息，减少混乱，为读者提供清晰的结构。






转自：站酷

作者：大峰_Design 

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

评论(0) 浏览(7737)

2021年10个LOGO设计趋势

前端达人

在经历了一个不太理想的新十年开局后，年轻人们迫切需要重塑品牌。幸运的是，以下2021年的标志设计趋势完全可以胜任这项任务。

观察来自世界各地的logo设计作品，他们的预测代表了设计环境的变化。虽然去年的趋势集中在通过新技术进行革新，但2021年标志趋势中的一个共同主题似乎是限制条件下的创新。过去的一年可能在很多方面限制了世界，但是2021年的标志设计师们还都在继续努力着。



  • 彩色玻璃

  • 透视图

  • 简单几何

  • 发散字母

  • 真实写真

  • 原始对称

  • 古怪的人物

  • 现代象征主义

  • 静态运动

  • 类似配色方案


 

标志设计作为一项相对现代的发明，往往在过去的技术和局限中寻求灵感。在2021年，许多标志设计师在过去时代的彩色玻璃窗中找到了启发。


undefined

   

当应用到现代设计中时，将图像分割成纯色碎片，给普通概念增添了一点抽象感。彩色玻璃也与神圣联系在一起，因为它起源于中世纪教堂。这可能不是巧合，这种标志趋势经常与美丽的自然景观结合使用。在一年的大部分时间被困在室内之后，我们可以期待我们脆弱的生态系统将在2021年的彩色玻璃标志设计中得到尊重。


  


正如标志设计师林登·莱德（Lindon Leader）曾经说过的那样，伟大的设计源自简洁和清晰。这两个优点使标志设计能够有效地向观众传达品牌的复杂身份。这就是为什么许多过去的标志潮流都集中在极简主义和平面设计上。




虽然2021年的logo设计师们决不会放弃这种方法，但他们正寻找在过度简化中失去的一些魔力。一个流行的标志设计趋势是融入微妙的视角。使用基本的绘画技巧，如线性透视，曲率或缩短，设计师能够创造深度的错觉，而不会使设计复杂化。



其效果是，标志给人的感觉很突出，品牌从页面上一跃而下，而半平面的设计技术，一直以来都是为设计师服务的，但至今仍然完好无损。

  

形状是构成意象的基石。但是，尽管三角形、正方形和圆形等原始形状一旦打下基础，往往就会被淘汰，但它们纯粹的简单却有力量。



2021年的设计师们正利用这种力量，用简单的线条和形状制作出标志。这种对形状极简主义的严格遵守给了这些标志一种刻意克制的气氛，允许他们在其他地方自由发挥，比如在丰富的颜色饱和度上。


undefined


这种方法的另一个特点是，简单的分层可以产生一种结构和深度的错觉，这符合我们前面提到的透视图趋势。通过纯粹的造型语言，设计师能够创造出易于解析、令人难忘、色彩鲜艳的logo。


  

基于字体的文字标记标识有着直截了当的名声，无论好坏。虽然他们使品牌名称成为整个标志的焦点，因此更令人难忘，但他们没有留下太多的空间，为创意铺路。但是2021年的标志设计师们正在一个字母一个字母地改变这种印象。

undefined

undefined


具体来说，我们看到越来越多的单词标记中的一个字母被夸大了。这可以是一个颜色突出的小写的“i”，或作为一个突出的筷子形成一个大写的“H”。这个不同的字母不仅创造了一个吸引眼球的兴趣点，它给予品牌最好的选择：一个传统的，基于类型的标志，也不怕打破规则。



  

人们凭直觉寻找其他面孔，这是一个有据可查的事实，这就是为什么肖像画有助于在设计中建立情感联系。这些面孔越真实，越容易辨认，联系就越深。

undefined


因此，2021年更多的标志设计师开始转向反映不同种族、文化、性别、年龄段等的肖像画。与媒体过于拥挤的同质表现不同，这种方式创造了真实的印象，有助于人们在瞬间与品牌建立联系。这些标志可以从简单的，平面的人物肖像到详细的说明性技术。


归根结底，设计师们厌倦了那些让人感觉不亲切的形象。归根结底，无论一个标志是在讲述品牌背后的人还是品牌服务的人的故事，人都是关键。


undefined

undefined


 
  

平衡是标志设计的基本原则之一，而对称也许是其最极端的表现。对称的标志从中间分开时，两边是相同的。


虽然相同性和可预测性似乎是冗余的同义词，但对称设计完全是关于强度的。它们让我们想起了建筑，无论多么高大复杂，它们的设计都是为了站稳脚跟，它们通过完美的对称平衡来实现这一点。


undefined

undefined


这种原始的对称性允许标志包含线条艺术，感觉既不可能复杂又完美有序。但即使对称在几何设计中很常见，我们也看到这种趋势在手绘徽标中找到了归宿。无论是设计师追求的完美还是实力，有一点是肯定的：2021年的标志建筑是为了经得起时间的考验而建造的。


undefined

undefined


 
  

虽然logo设计师在真实人物的表现上处于领先地位，但2021年的其他许多人则通过漫画和夸张的幽默来对比这一点。我们正在看到越来越多的以插图为主要内容的logo呈现出诙谐，甚至古怪的概念，从玩老鼠的医生到华丽的甜甜圈花花公子。


undefined

undefined


从事舒适或娱乐的企业希望能让他们的观众放松，而设计师们则用散发着博爱气息的logo来回应。最终，这些异想天开的设计让顾客觉得他们找到了朋友而不是品牌。


  

逻各斯的根源一直是古老的象征，从升起的凤凰到不朽的女神，再到无所不能的眼睛。就像古代的象形文字一样，它也是一个标志的目的，通过简化的图形来传达信息。


undefined

undefined


通常，logo寻求创造他们自己独特的符号语言，但在2021年，设计师们正在疏导古代符号的力量。其效果是将人们普遍理解的、经典的美德与奋斗品牌的愿景联系起来。开始一个新的企业是一个信仰的飞跃，这些象征性的标志承载着一个启示的承诺。


undefined

undefined


 
  

 

undefined

undefined


这意味着运动跟踪器、流体形状、飞溅粒子和动作线的增加。对于那些希望创新的企业，比如科技品牌，这是一个标志潮流，肯定会引起轰动。它提醒顾客品牌不仅仅是一种产品或服务：它是一种活的东西。


undefined

undefined


 
  

随着每年的标志设计潮流，我们常常期望找到令人眼花缭乱、革命性和颠覆性的技术。另一方面，相似的配色方案是学生设计师在第一年的色彩理论学习的内容。这基本上意味着在色轮上对彼此相邻的颜色进行配对，其结果是创造和谐的科学方法（代替对立颜色的对比）。


undefined

undefined

虽然类似的配色方案并不一定是新的，但它们在标志设计中日益流行可能表明了对对比度的排斥。色彩是设计师用来影响观众情绪的最重要的工具之一。


undefined

undefined

undefined

2021年的标志设计趋势是重塑这个新的十年的一个机会。从透视技法到简单造型再到对称性，从极简主义到古典主义的复兴，我们未来的理性似乎在追求一种纯粹。


转自：站酷

作者：Brain斌 

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

评论(0) 浏览(2744)

交互设计方法论

前端达人

通过对产品用户界面的分析与设计方法论相关联，梳理了在UI UE日常设计中使用的一些定律和原则；相信大家在工作过程中都遇到过这类灵魂拷问“你这么设计的依据是什么？ 为什么这么设计”，熟悉了这些定律、原则 我们就能自如的去应对这些拷问，也能够非常快的去熟悉市面上的一些主流设计规范。



转自：站酷

作者：Ethan_Ling

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

评论(0) 浏览(2055)

功能优先：减少主观性和偏见的方法

资深UI设计者


当您在进行新项目时，有什么比选择合适的功能来开发更重要的呢？？，这种练习常常变成团队投票的奇观。结果，决策在未来会发生很多次变化。让我们谈谈流行的优先排序技术和减少偏差和分歧的方法的陷阱。

或这样：在优先考虑所有功能之后，关键利益相关者改变了主意，您必须重新计划所有事情。两种情况都发生在我的团队和同事身上。

无效的决策方法
为什么决策方法不能按预期工作？（大型预览）

功能优先级的成功或失败是因为一件小事，在这里最终处决答案之前，我不会让您感到疑惑。关键因素是选择标准。但是首先是第一件事。让我们看看可能出什么问题，然后我们将讨论减轻这些风险的方法。

挑战1：非专家和专家具有相同的投票权

产品团队努力做出正确的权衡，并在资源有限的情况下嫁入无数种选择。通常，决策是协作活动的结果，例如点投票，价值对体积画布，MoSCoW，Kano模型等。

尽管这些技术是由不同的人发明的，但它们的工作原理基本上是相同的：团队成员将带有所有功能构想的便笺贴在板上，然后将最有希望的构想入围。打分或投票给这些想法打分，或者根据每个功能的可行性，可取性或创新性沿纵向分布它们。

点投票，价值与可行性，强制排名，Kano模型和MoSCoW。
点投票，价值与可行性，强制排名，Kano模型和MoSCoW。（大型预览）

当您邀请专家参加时，这样的民主表现就非常有用，这些人是内在地知道这个话题的人，或者像丹麦物理学家尼尔斯·玻尔（Niels Bohr）说的那样，“犯了当团队中的每个人都是专家时，票数的分配将表明最佳想法。所有可能在非常紧张的领域犯下的所有错误”。

但说实话：讲习班通常具有办公室政治的味道。例如，一个研讨会可能会吸引对您的建筑不感兴趣的高能干利益相关者，或者您可能必须邀请失去动力并影响整个团队工作的非必要专家。那就是为什么在房间中只有两个或三个可以做出明智决定的人变得如此容易的原因。

并且，作为协调人，您急切希望提出最共识的意见，而当专家的声音与非专家的声音相同时，这就会成为问题。

挑战2：至少情况下有人没有做出合理的决定

即使，您有专家参与，他们也可以代表不同的领域和领域。因此，他们将做出不同的选择。如此，即使对于有知识和熟练的人来说，理性思考也不是另一种方式。

人类必须应对许多同时发生的思维过程，并面临180多认知偏见。启动效应就是一个例子：在研讨会之前一个人发生的事情会影响他们在研讨会期间的行为。因此，如何确保专业知识（而不是个人喜好或情感）驱动功能优先级？

点票
例如，点票不会告诉您为什么选择这个或那个想法。（大型预览）

之后几乎不可能猜测每个选择背后的原因-除非您以某种方式提前支持理性思考。

每次投票的可能理由示例
这些是每次投票可能提出的理由的例子。（大型预览）

商业并非全是娱乐和游戏：团队必须根据数据做出艰难的决定，将自己的异想天开，品味和偏见插入门外。作为促进者，您当然不想根据利益相关者的喜好或当下的感受来做出业务决策，对吗？但是，在许多练习中，“我喜欢这个主意”与“这将帮助我们的公司成长”一样，值得信赖。

挑战3：测量单位可以解释

优先活动的另一个陷阱是度量系统，例如：

  • 数字标记（从1到5，斐波那契刻度等）；
  • 符号（点，星，笑脸等）；
  • 隐喻（例如卵石，岩石，巨石）；
  • T恤尺码（S，M，L，XL）；
  • 项目在画布的水平或垂直轴上的位置。
提议和策略研讨会的指标单位示例。
提议和策略研讨会的指标单位示例。（大型预览）

对一个人而言，获得一定数量的选票或特殊计量单位的目的是为了在优先排序过程中平衡意见。但是他们没有考虑有人对现实的看法有何不同，更不用说全球团队的文化差异了。的方面可能对另一个人无关紧要。

例如，如果我听到美国客户说的是“好”而不是“很棒”或“很棒”，那我就知道自己有麻烦了。这意味着他们不太满意。但是“好”是欧洲普遍赞美的表现。投票也如此：S大小的任务对内部高级布局开发人员来说是一回事，而对于市场顾问则意味着另一回事。

测量模糊性
测量的模糊性令人惊奇。大型预览）

而且，现在很多人都精通“设计思维”和“敏捷”，可以下意识地操纵选票或有意利用尺度系统的模糊性来推动自己的想法。

如果团队成员之间的争执失控，您将花费大量时间徒劳，并且无法及时达成共识。严重恶劣的是，辩论最终将导致会议室中潜在的影响力的利益相关者所提倡的想法的被迫同意。那么，如何更好地处理优先级？

克服优先级偏见

方法1：带注释的标记

在我的一个项目中，我们正在设计一个复杂的解决方案，其中涉及技术，业务流程以及全球数百个人的专业知识。因此，我们不能狭义地定义功能的期望值（例如用户满意或可用），因为它不仅仅与最终用户或界面有关。

我们的团队确定了解决该解决方案中受益的五种利益相关者类型，并且我们提出了一个描述性规模来评估功能。它既考虑了利益相关者的覆盖范围，也考虑了该解决方案可以帮助他们解决的任务的重要性。

两种不同的期望值量表
比较比例尺：哪个更容易体现要素？（大型预览）

当然，我们可以使用1到5的简单比例，其中1代表值，5代表最高值。但这并不能使我们清楚每个功能的价值在现实中意味着什么。从而，在真空中评估项目始终具有挑战性。“低”有关什么？“中等”比例又是什么？公认会出现这样的问题。

同样，我们决定添加真实的描述。代替抽象的“低”，“中”和“高”，我们根据该功能的实现应涉及大量劳动力和金钱来打分。我们知道，可以在一定程度上决定所需工作水平的因素是我们可以自己完成还是仅与第三方一起完成。

两种不同的期望值量表
比较比例尺：哪个更容易体现要素？（大型预览）

结果，数字获得了意义。

后来，我们创建了一个结合了多个特征的书呆子表。这有助于我们检查某个功能是否具有均衡的合理性，可取性和获利能力-简单，是否可以做到，客户是否期望并为企业赚钱。

比较表中表示的三个参数的示例。
比较表中表示的三个参数的示例。（大型预览）

根据您的项目，条件可能会有所不同。一个项目可能需要您评估潜在的收入和实施工作，而在另一个项目中，您可能必须重点关注易用性，预期的部署工作和估计的维护成本。如何，方法都保持不变：首先，定义基本标准，然后建立可行的量表，最后进行评估。

如何建立这样的规模？从极限开始-最小和最大标记。1（或0）是什么意思？5、10或意味着什么？

创建带注释的比例的四步过程。
创建带注释的比例的四步过程。（大型预览）

当定义了最小和最大标记时（在上面的示例中为1和5），您可以为中间标记（3）然后为其余标记（2和4）写一个描述。这种方法有助于在标记定义之间保持或多或少近似的增量。

简而言之
  • 方法
    将现实生活的描述添加到抽象数字标记。
  • 优点
    清楚地选择标准可以使协议更容易达成共识，主观性降低，讨论时间也可以。
  • 限制条件
    建立充分的规模需要时间；这样的规模是与既有相关的，可能不会在其他项目中重复使用。

方法2：描述性画布

在表中排名不同，画布提供了更灵活的表示形式和更独特的获胜者。但是，如果使用模糊的标准，则可能会破坏整个练习。

从低到高的规模以获取价值和可行
哦，这种画布引起了多少竞争？（大型预览）

从到高的标度的主要问题是它们的分类性质。任何想法的作者都不会承认它的价值不高。他们将坚持自己的立场，说服团队成员将便签贴放在“低-低”区域之外的任何位置。另外，您可能会发现所有“局外人”想法都属于实力较弱的利益相关者。

细分但模糊的画布示例。
细分但模糊的画布示例。（大型预览）

“困难”可能意味着任何事情，但“需要外部专业知识和资源”可以更好地说明这种困难。期望值也不会：“解决已证明的严重痛苦”是一种过滤器，它不会让有人提出没有任何证据支持的想法-无论是用户研究，客户支持票证还是市场分析。

带有实际切片的画布示例。
带有实际切片的画布示例。（大型预览）

该方法简化了优先级排序，但是以花费一些时间来准备规模，特别是在准备简洁的部门名称上花费了时间。

在使用这类画布时，请注意交通灯的颜色编码。对于最终的输出演示文稿，这可能是一个不错的选择，但是在研讨会中，这将增加偏见，使人们不愿意让自己的选票最终出现在红色区域。

简而言之
  • 方法
    将现实生活的描述添加到画布的轴。
  • 优点
    映射标准的清晰性使协议更容易达成共识，主观性取向，讨论时间也可以。
  • 局限性
    尺度在每个轴上有三个部分，效果最好。规模是一些相关的，可能无法在其他项目中重复使用。

方法3：多元化投票

投票是达成共识的快捷方式。匿名时，所有选票均被接受且权重替代。投票授权谦虚的利益相关者，并降低等级障碍。但是，这也掩盖了每个单独选择背后的原因。最大的挑战是，参与者需要以某种方式立即权衡所有可能的标准，并迅速选择（并希望明智地选择）。

点投票的典型设置：带粘滞便笺和个人点集的画布。
点投票的典型设置：带粘滞便笺和个人点集的画布。（大型预览）

在与客户的许多计划会议中，我都加入了经典的点投票，并且常常产生一些决定，我们稍后会完全改变。自然，我想避免双重工作。因此，在一次会议中，我们尝试了增强版，并为具有不同专业知识的人员分配了特定的颜色-绿色代表客户语音的“保持者”，蓝色代表有财务思想的人，红色代表可以评估可行性的技术专家。

带有多个投票点的画布
多元化的投票点传达了团队成员的主要专业知识。（大型预览）

首先，这种方法使我们了解了人们在做出选择时可能会想到的想法。其次，我们缩小了获奖者名单。仅有几张便条纸从这三种颜色中获得了票数，并被同时认为对客户有利可图，有价值。

用彩色圆点装饰的画布
用彩色圆点投票解码画布。（大型预览）

这种方法使我们能够专注于最好的功能，而不会被单方面有前途的项目所干扰。通过经典投票，我们通常会有5至7名决赛选手。多元化的投票显示只有两个或三个符合所有标准的最高创意。

简而言之
  • 理念
    给具有不同专业知识的人提供不同颜色的点。
  • 长处
    它缩小了最终想法的数量；它同时考虑了票数和各种利益的平衡；而且它仍然是一种快速而简单的练习。
  • 局限性
    它仍然不能完全消除主观性。

一件事：语言！

有一种话语可能会破坏优先级：“投票给您最喜欢的功能”，或者改写为“现在选择您喜欢的想法”。这些话打开了主观地狱的大门，并向您的团队发出了幻想和推测的正式邀请。

  • “在最喜欢的功能上留下点点滴滴。”
  • “现在，请投票选出最佳功能。”
  • “选择最有价值的功能并投票给他们。”
  • “您在白板上最喜欢的想法是什么？”

不要给这些无益的指示，而是要使人们处于理性的情绪中，并帮助他们倾听内在的理性声音。

  • “根据您的知识和实践的先例，哪种功能创意最快就能得到回报？”
  • “请回想一下最近的一个开发项目，特别是花费了多长时间以及使工作减慢或阻碍了什么。现在，板上最容易实现的功能思想是？”
  • “我们将在一分钟内对客户的期望价值进行投票。让我们回想一下他们在支持票中所抱怨的，他们在采访中的要求以及根据我们的分析得出的使用最多的东西。那么，白板上呈现的哪些功能可以满足最关键的需求？”
  • “回顾您与最终用户的对话以及最近的用户研究结果。哪些功能可以解决他们最严重的痛苦？”

摘要和Miro模板

主观性是人性的一部分。我们不可避免地要做出情感决定，但是有一些方法可以使选择减少一些偏见。主持人无法控制专家头脑中正在发生的事情，但是我们可以尝试使团队成员处于正确的决策状态。我推荐两个基本的东西来简化决策过程：

  1. 宣布，重复和将有意义的选择或投票标准嵌入到您的决策过程中。
  2. 促使人们考虑自己的相关专业经验和来自先前研究的数据，而不是自己的偏好。

随意使用这些 优先练习的Miro模板。

优先练习的Miro模板。
文章来源：smashingmagazine   作者：Slava

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



评论(0) 浏览(2864)

UI/UE设计师的产品体验日记

前端达人

指尖滑动屏幕的时候，多停留几秒，捕捉一些用心的设计，记录并反思应用到自己的设计中去。用心设计，让我们的生活更加美好！

01、广告植入


关键词

#运营  #广告


产品体验

微信：刷朋友圈的时候，无形中就刷到了广告，以朋友圈的图文展示。也可以进行点赞，留言互动。

微博：在关注列表中也会有一些广告推送。用户可以自己关闭。

爱奇艺：打开视频观看前，会有一小段广告时间播放，如果没有购买会员是需要强制观看完广告才能看视频正片。


设计思考

微信：隐形植入广告，以“朋友”的身份跟你安利一个物品，角色扮演，用另外一种方式介绍产品。

微博：无形中插播一个广告推文，广告的标签跟关闭的按钮做的小，不明显，增减关闭难度。

爱奇艺：提供付费权利，可关闭广告。


02、短视频互动功能


关键词

#交互  #点赞  #评论


产品体验

微博：全屏短视频体验。关注，点赞等功能图标悬浮在右侧，方便用户点击，交互都关联性也强。

美图：右侧一排操作按钮，分享按钮却在头部，距离有点远，很难被注意到。图标采用半透明叠加更有设计感。跟美图这个产品很契合。

QQ微视：上中下的布局，中间是视频主区域。关注按钮在顶部，评论交互都在底部，比较传统的布局体验。


设计思考

微博：视频内容全屏展示，沉浸式用户观看体验。把一些按钮设计的离用户可触碰区域近一点，在用户手指操作的热点区域，加大他们的点击欲望。

美图：视频内容全屏展示，关注直接用文字加色块高亮显示，直接刺激用户，引导他点击。底部设置美化图片产品本身设置了快捷入口。有点弱化分享操作。

QQ微视：视频上方没有其他干扰元素，采用比较中规中矩的布局。


03、关注用户按钮


关键词

#加关注 #弹窗


产品体验

美图：首页的短视频，点击用户进去可以看到他的创作，当页面下拉的时候，关注按钮会一直停留在页面顶部，高亮显示。

小红书：点击个人用户进去看笔记，下拉过程中“加关注”会一直在右上角显示，继续往下拉，底部会出现一个弹窗，提醒你可以关注一下，二次引导。


设计思考

美图：主要是一个提高修图的工具，并提供给用户去分享美图的平台，没有做过多的引导用户操作。

小红书：主打个人社交平台，流量，关注度是主要的数据。发作品的目的性较强，所以给用户做了二次引导关注。帮助创作者博得更多的关注度。


04、视频进度条


关键词

#进度  #视频  #品牌宣传


产品体验

哔哩哔哩：进度条直接了当，当前位置的标记会结合视频的宣传属性来用一些特殊图标来加深用户观感。

爱奇艺：

1、视频有标记记忆点，帮助用户快速定位到想要了解的内容；

2、当前位置采用该视频品牌logo；

3、视频上方有观看热度的面积图，感觉有点被打扰，对用户来说重要性不是很高。


设计思考

哔哩哔哩：

1、视频进度条颜色是品牌颜色；

2、当前位置不再是单一的基本图形，会用一些有趣的图形替换，同时视频属性。

爱奇艺：

1、进度条颜色不在是单一采用品牌色，可以个性化不同场景搭配使用；

2、当前位置的状态用视频的品牌植入logo，起到二次宣传的作用；

3、效果视频记忆点，根据后台剪辑标记用户可能感兴趣，帮助用户快速定位；

4、进度条上方有观看热度的曲线。感觉这个设计有点多余，手机观看尽量减少视觉干扰。


05、轨迹与预计到达时间结合


关键词

#轨迹 #地图 #预估时间 #定位 #场景


产品体验

杭州公交：等公交等时候，标记你所在位置的站点，通过图标大小、颜色标记其他公交车到站情况，很直观。可以给自己等车时间做心里准备。

淘宝：物流运行轨迹在地图上显示，结合发出点到签收地，预计的时间跟签收状态。


设计思考

场景化思维设计，让用户身临其境感受。

杭州公交：聚焦与单条公交线路线，去除复杂的地图背景，直接用图标标记与你所在站点的位置关系，同时上方卡片会显示即将到找的三个公交车预计时间，给用户准备候车预留足够的时间准备。

淘宝：物流在全国范围内跑，使用轨迹结合地图会更加直观。能看到当前所在的位置，预计还有多少时间送达等等信息用场景来表达。


06、图像拍照识别


关键词

#拍照，智能识别


产品体验

百度：拍照识别的时候，全屏且屏幕中会标记小白点高光，一闪闪，bringbring 。

有道云：拍照上传识别的时候，会出现锚点可以拖拽自己想选择的图片区域，直接裁剪。


设计思考

百度：识别照片环境的时候，有小光斑互动，带有智能科技感，让体验更加有趣。

有道云：拍照过程加入裁剪功能，对图片预处理，提高笔记效率。


07、文档信息编辑


关键词

#编辑  #弹窗


产品体验

石墨：编辑本条笔记时，底部弹窗，一行显示一个操作，“删除”标红。

有道云笔记：有11个操作动作，采用分类的方式布局，配合图标一目了然。


设计思考

石墨：追求极简体验，沉浸式设计。

有道云笔记：功能较多，底部弹窗最好不要超过屏幕2/3，影响体验，结合图标更加直观。


08、搜索框内提示文案


关键词

#搜索提示语


产品体验

微博：不知道看什么时，会提示你看别人都在搜什么内容，引起你的兴趣。搜索下方也有热门搜索，也是可以买的“热搜”广告位，增加曝光率。

淘宝：根据你之前搜过的产品，程序自动给你推送一些对应产品的关键词搜索。


设计思考

微博：热搜的一些运营，业务层面考虑。

淘宝：电商类，记录你的搜索喜好，给你推送符合你的产品，千人千面。


09、金刚区下面的公告栏板块


关键词

#公告  #内容信息


产品体验

喜马拉雅：电台模块，可以私人定制自己感兴趣的电台。

支付宝：一些公告，消费通知，结合IP形象，触角还会动两下，感觉是在跟你互动对话。


设计思考

喜马拉雅：本身是个声音类产品，用电台的形式订阅自己喜欢的内容推送。

支付宝：用支付宝自己的蚂蚁iP形象，加深品牌影响，同时也起到提示作用。


10、下拉加载


关键词

#缓冲  #加载


产品体验

美团外卖：下拉加载时，用美团袋鼠IP在跑的小动效来缓解用户焦虑。

安居客：页面拖动下拉的时候，在头部有个楼盘建筑2.5d插画，感觉有另一个空间的感觉。

淘宝：淘宝详情下拉对时候，有一个历史足迹，再你逛了很多商品之后，反复对比，想回去之前的店再逛逛，同时也减少了用户页面跳出率。

微信读书：页面下拉的时候，可以添加书签，对当前页做记录，下次可以快速找到改页面内容。


设计思考

美团外卖：植入IP形象做动效，加深品牌印象。

安居客：创造二次空间感，让加载的过程中，没那么焦虑，反而让用户觉得惊喜。

淘宝：模拟用户使用场景，在购买商品过程中会对产品反复对比，加入一个历史足迹，同时提高页面转化率。

微信读书：下拉的过程中给用户制造惊喜。


11、配图多张排版


关键词

#配图多张排版  #图片


产品体验

淘宝：有视频，又有多张图片的情况下，视频权重比图片大，左一右二展示，其余收起来，点击查看全部。

拼多多：图片跟视频同时存在，平铺展示，视频默认放第一个位置，一行三个，大小统一。

今日头条：头条文章内有多张图，列表流只取三张显示。


设计思考  

淘宝：商品评论较多，控制每个评论列表高度统一性，一屏用户可见更多买家秀，同时刺激点开视频的行为。

拼多多：弱化视频跟照片的比重。

今日头条：图片更直观表达，也是用户第一时间注意的信息。首页列表需要能贴合文章内容，刺激用户点击，可后台手动配置列表展示配图。


12、优酷视频青少年权限


关键词

#用户权限


产品体验

个人中心头像上方有个“成长守护：可以设置青少年模式，主要是为家长用户对小孩上网观看视频的一个管理。


设计思考

概念包装：现在网络视频内容层次不齐，不同年龄层都能接触各类信息，鉴于对青少年的保护，对视频推送权限设置，用“成长守护”包装权限设置，让产品更有温度。


13、评论页留言列表


关键词

#评论列表


产品体验

知乎：评论列表整屏弹窗，用户回复用户，名称之间用一个小箭头指向，很有特点。作者身份跟在用户昵称后面。

爱奇艺：留言回复没有展示用户头像，只有昵称。对同一留言回复用色块区分。

小红书：评论列表2/3弹窗，同一留言内容最多显示一条，多余的折叠。


设计思考

知乎：用户名称比内容层级较高，并结合头像使用，用小尖头图标直观表达回复对象的动作。

爱奇艺：视频为主，评论为辅；对同一留言评论用灰色底，使用亲密性原则，对其他评论人的头像隐藏，注重评论内容。

小红书：从下网上的弹窗形式，一屏展示内容区域较少，同一留言多条评论就收起展示。


14、视频类个人中心页面


关键词

#我的个人中心

 

产品体验

爱奇艺：开通会员提醒醒目，右滑展示不同类别的会员。

腾讯：开通会员提醒明显，下面是观看历史，常用功能分类。

优酷：顶部有关注、粉丝、作品等数字信息展示，其次是开通会员提醒。


设计思考

爱奇艺：视频平台合作，会员权限开通付费为主要业务。

腾讯：以平台为主，个人创作视频转型中。常用功能归类，节省首屏利用率。

优酷：注重社交属性，鼓励个人创作视频上传。


15、视频类引导开通会员


关键词

#会员服务，运营


产品体验

视频页面都设置了两个开通会员入口

1、打开视频默认播放广告，视频右上角开通会员可关闭广告；

2、视频正下方有个大的提示开通会员入口

爱奇艺：结合用户心理，用文字优惠刺激用户开通。

腾讯：会根据活动给予免费体验会员的服务。

优酷：直接把会员所享受的服务内容展示出来。


设计思考

爱奇艺：没有多余的描述，直接提示新客优惠。

腾讯：正下方的开通会员文案会根据不同的视频运营有不用的文案，比如超前点播，活动免费领取等等。

优酷：首屏占的比重大，无论视频上方关闭广告 还是正下方，按钮都设计的很大。


转自：站酷

作者：  大峰_Design 

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

评论(0) 浏览(2234)

UI界面设计常见的布局构图

前端达人

今年算是写的第四篇文章，UI系列写的第二篇文章了，2020还有10天过去了，祝大家在新的一年里愈来越好。


构图是指作品中艺术形象的节后配置方法。是造型艺术表达作品思想内容，并获得艺术感染力。在视觉艺术中常用的技巧和术语，特别是绘画、平面设计与摄影中。在UI设计中，构图的主要作用是：构建和谐稳定的页面布局。



1.1 最平衡的构图对称构图1:1 

左右对称上下对称的构图，一般不会有太大问题，因为人类对世间万物的观察来看，因为在生活中绝大多数的事物都是对称的。


对称平衡的形态在视觉上有自然、均匀、协调、整齐、稳重的美感，复合用户的视觉习惯。



“对称构图”是将版面分割为两部分，通过设计元素的布局让画面整体呈现出对称的结构，具有很强的秩序感，给人安静、严谨和正式的感受，呈现出整齐、平稳、经典的气质。在得物（毒）中应用体现平台的核心正品与品质。



1.2 设计中不平衡原因

视觉错觉是指人们对外界事物的不正确的感觉或知觉。最常见的是视觉方面的错觉。产生错觉的原因，除来自客观刺激本身特点的影响外，还有观察者生理上和心理上的原因。其机制现在尚未完全弄清。



（1）缪勒—莱尔（Maller-Lyer Illusion）错觉：1989年由缪勒一莱尔（F．Muller-lyer）设计，末端加上向外的两条斜线的线段比末端加上向内的两条斜线的线段看起来长一些，其实两条线段等长。

（2）艾宾浩斯错觉（Ebbinghause Illusion）：看起来左边中间的圆比右边中间的圆大—些，但实际上这两个圆的大小相同。

（3）庞佐错觉（Ponzo Illusion）：中间的四边形是矩形，而不是顶边比底边宽的四角形。

（4）厄任斯坦错觉（Ebrenstein Illusion）：中间矩形的四条边看起来是弯曲的。

（5）黑灵错觉（Hering Illusion）：中间两条线是平行的，但看起来是弯的。

（6）菲克错觉（Fick Illusion）：垂直线段与水平线段等长，但看起来垂直线段比水平线段长。

（7）冯特错觉（Wundt Illusion）：中间两条线是平行的，但看起来是弯的。

（8）波根多夫错觉（Poggendoff Illusion）：被两条平行线切断的同一条直线，看上去不在一条直线上。


1.3 不平衡中的平衡构图

在整体的页面平衡的情况下，同样还需要考虑视觉上的平衡。


任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一个元素有某总视觉联系，而这个视觉联系往往是看不到却可以感受到平衡感，在平面海报中的平衡原则得到了最大的应用。



如上图所示，三少爷的剑这个海报设计，将整个海报布局进行几何化分析，地面为一个倾斜的平面，人物为一个垂直于地面的一个个体，人物上方为主体文案。几何化后如同一个倾斜的斜面放置了一个倾斜的天平，最后一个“剑”字、与下方英文如在右倾斜天平上面的一个稳定的砝码。然而整体还是不够平衡，设计师通过燕十三的视觉视线、以及围绕他的杀手用剑指向他的方向为力的方向将整个页面进行平衡。通过用剑多少占比、字体大小等等的细节使得整个页面达到最微妙的平衡点。这样的设计之后达到一种平衡而有不平衡的微妙感觉，不平衡感体现整个页面的“ 动 ”武侠之感油然而生；而平衡感表达了整个页面的“ 静 ”冷冷的肃杀感、高手的寂寞感油然而生。



让设计中的视觉要素在画面中页面平衡。可以通过字重、颜色、形状、线条、图片占比等等，这样可以增加整体页面的平衡感。通过小米中的构图可以看出上方所有图片文字偏左，通过右方一个高亮的按钮进行平衡感的设计；下方文字左边文字较少用重的深色的字体，而右边文字较多用轻且浅的文字这样的设计达到整个页面的平衡感。



2.1 黄金分割设计法 

黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。



设一条线段AB的长度为a，C点在靠近B点的黄金分割点上，且AC为b，则b与a的比叫作黄金比，黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，这一比值能够引起人们的美感，被认为是建筑和艺术中最理想的比例。 

画家们发现，按0.618:1来设计的比例，画出的画最优美，在达·芬奇的作品《维特鲁威人》、《蒙娜丽莎》、还有《最后的晚餐》中都运用了黄金分割。



UI页面设计中的黄金分割比的应用有很多如上图所示，页面整体功能摆放位置，遵循黄金分割比的分配表达出来整体页面更加的和谐聚焦。


2.2  九宫格设计法


九宫格构图有的也称井字构图，实际上属于黄金分割法的一种形式。就是在画面上横、竖各画两条与边平行、等分的直线，将画面分成9个相等的方块，在中心块上四个角的点，用任意一点的位置来安排主体位置，就是九宫格构图。



实际上这四个点都符合“黄金分割定律”，是表现画面美感和张力的绝佳位置。当然在实际运用中还应考虑平衡、对比等因素这种的构图原则在海报以及摄影中有着极大的使用。



3.1 UI页面布局的格式塔原理 

格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。



创始人提出的5项基本原则：简单、接近、相似、连续、封闭。


3.2 简单几何构图法

简单原则就是具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。我们的眼睛在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。



简单阅历暗合构图法则，例如常见的三角形构图，均衡构图，对阵构图，向心式构图，对角线、x型构图等，其目的都是为了在复杂的信息环境中，构建更易懂的整体。


3.3相似构图法

相似原则指的是在某一方面相似的各部分趋于组成整体，强调内容。而接近强调位置。人们通常把那些明显具有共同特性（如形状、运动、方向、颜色等）的事物组合在一起。



由上图可见，当用户看到这个这个页面的时候，会自觉的把上面5个icon看作一个整体，因为他们的颜色形状都是相同的；文字颜色与字体大小相同会被自然的看作成为一个相同的功能，如同样的红色都是价格，同样的黑色都是商品名称；相同的汽车图片直接清洗的都可以归类为同列表商品。


3.4接近构图法

单个视觉元素之间无限接近，视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体，而单个视觉元素的个性会减弱；



相关元素会尽量接近，不相关的尽量远离。这种构图它强调化繁为简，去除一切与内容无关的装饰性元素，突出内容本身，好让重要的信息及功能更容易被关注，让用户增加更清晰和直观地进行浏览。在这种排版设计中，您几乎看不到区分内容的分割线，他通过大间距完成了视觉层次的划分，留白是它们最大的武器。



彼此相关的项，归组在一起。如果多个项相互之间存在很紧的亲密性，他们就会成为一个视觉单位，而不是多个孤立的元素。这样有助于组织信息，减少混乱，为读者提供清晰的结构。





转自：站酷

作者：  大峰_Design 

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


评论(0) 浏览(7334)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档