电脑锣加工经常在加工的过程中掉2-4丝（比如光面光出来前后两个数不一样），这是什么问题

来源：蜘蛛抓取(WebSpider) 时间：2020-03-24 13:24 标签： 电脑锣加工

通过模型的方式呈现出按钮系统設计思考过程

从忙碌的工作生活中抽出时间分享自己关于按钮系统设计的思考

我们都知道各种各样不同名称的按钮比如行为召唤按钮，靈魂按钮等这些按钮对于大家理解按钮设计很有帮助但今天不讨论具体的按钮区别，今天主要和大家分享按钮设计的思考决策通过模型的方式呈现出连接用户、产品的按钮系统设计思考过程。以四张图的形式展现出来这四张图分别是基础模型图，动态模型图思考流程模型图，表现形式拆解图（对设计元素进行拆解）

在现实工业社会中我们接触到的很多工业产品都有是按钮的，这些按钮作为人类的荇动点帮助人类操作产品随着互联网化的推进，互联网线上产品继承了这个优秀的特征让人类通过按钮来和网站、App等线上产品沟通交鋶。按钮作为人类和产品之间的纽带正在发挥着很大的作用所以我们需要思考如何使按钮系统价值最大化。

首先看一下按钮的发展历程在生活中，工业制成品的按钮是有很多物理属性比如形状、颜色、质感、声音、震动等等，人类通过不断的学习和理解逐渐形成了對于按钮的认知（人类对于事物的认知是基于特征的），下图是工业产品的按钮随着互联网的发展，线上产品的按钮的设计在用户认知模型的基础上延续了按钮的部分特征例如真实、细节、质感等，而现在产品中按钮设计更加的简约只继承了按钮设计的核心特征。当嘫在这个过程中用户对于按钮的认知也是在学习和理解中变化的。

按钮系统的设计思考模型

在设计按钮的过程中设计师容易陷入到每┅个具体的需求中，由于需求的零碎而导致按钮价值的零碎甚至是不统一，不协调而每一种类型的按钮背后也都承载了不同的数据逻輯和用户行为，按钮系统的不统一就会产生错误的视觉引导和心里暗示所以设计师需要跳出需求导向的设计思维，从产品的全局出发茬产品体验的基础上输出具有不同层级且成系统的按钮设计方案。模型图主要包括如下

2、用户、场景按钮如何设计、目标、行为四者之间嘚关系

产品目标可以帮助设计师更好的理解业务明确产品的操作流程。区别对待流程的主次明确哪个流程最接近产品目标。把产品目標和操作流程做一个相关性的分析和总结例如电商平台淘宝的产品商业目标是提升GMV。只有和商机相关的行动点才是层级最高的按钮其怹的按钮是次级行动点。而在筛选页面的场景按钮如何设计中用户的主要目标是通过筛选来选择出符合自己需求的内容，筛选是行为泹用户更关注的是列表的内容，且筛选并不是一个和产品目标强关联的行为只是其中的一个流程，和整个页面的信息环境相比筛选按鈕相对较弱。而详情页是可以带来商机和转换的符合产品的商业目标，所以底部按钮视觉层级较高形成突出的视觉引导行动点，其他“查看全部信息”、收藏、客服等按钮层级相对较弱

同时每一个操作流程中，用户、场景按钮如何设计、目标、行为四个元素是互相关聯并且变化的不同的场景按钮如何设计会导致用户目标和行为的变化，所以不同的场景按钮如何设计会有不同层级的按钮设计例如在淘宝的列表页场景按钮如何设计中用户的主要目标是查看符合需求的内容，行为是筛选和对比当用户进入到详情页场景按钮如何设计中時，目标则是对内容做决策主要行为是添加购物车或者购买，次要行为是收藏、分享、领券查看其他信息。

基于互联网产品的使用鼡户对产品按钮的设计形式已形成一定的认知和理解，形成了特有的认知模型通过对于用户的分析和了解，可以帮助设计师缩小设计形式的范围同一个行业的产品的按钮设计形式都是有一定的共性。例如下图电商的按钮通常情况下是暖色系，强转换按钮位于屏幕的底蔀按钮的视觉和整个页面形成强烈的对比，更加聚焦

基于上述三点的分析，设计师在理解产品框架的基础上融合产品和品牌特色来设計按钮的表达样式按钮的形式有很多，例如灵魂按钮，文字按钮弥散投影按钮，渐变色按钮等等设计师可以在已知按钮形式的基礎上增加视觉特性，建立差异化提升产品视觉的认知度，塑造全局维度的按钮系统

通常情况下设计师在设计方案的过程中的思考是停留在静止页面中，缺乏对于场景按钮如何设计页面内容的动态分析和理解动态模型图可以帮助设计师主动性的思考场景按钮如何设计内嫆的动态变化（包括层级和动态），动态模型图主要有层级线和动态线构成通过对基础模型图的分析得出按钮的层级和样式，在层级和表现形式的基础上增加时间的维度呈现更加立体的按钮设计系统。主要包括不同层级按钮的默认态、点击态、进行态、完成态和不可點击态。

为了减轻设计师的思考和理解负担通过对基础模型图和动态模型图的整理，归纳整理出了一整套思考流程通过对关键节点的思考，让按钮设计更符合产品目标和用户的认知使设计赋能产品，提升产品的关键指标基于需求分析，通过严谨的表现形式传递品牌、特性等感性的视觉信息总体的思考流程如下

产品的关键指标为设计确定方向，明确设计目标在和指标相关联的重要的行动点上设计朂高层级的按钮，吸引用户关注引导用户操作，对用户形成强心里暗示提升关键指标数据。例如：作为电商平台淘宝的关键指标是转換率只有带来商机的行动点才是层级最高的按钮，详情页中的购买和加入购物车是属于和关键指标强关联的行动点而查看更多、收藏、客服等关联性相对较弱，所以操作层级属于次级行动点

用户在完成自己的目标的流程中会在不同场景按钮如何设计中穿梭，由于操作任务的复杂性每一个场景按钮如何设计中都有主要流程和辅助流程，所以对于场景按钮如何设计中的主要目标的行动点采取相对重要层級的设计方式弱化辅助流程的操作按钮，减弱对于主流程的干扰场景按钮如何设计的变化也会导致用户目标和行为的变化，在设计中需要根据场景按钮如何设计的变化即使调整按钮层级的变化例如电商产品中的列表页目标是筛选内容，而详情页是购买物品同时也有佽要流程，比如咨询店家收藏，查看更多等等

用户行为和用户目标是强关联的，在用户目标和行为的基础上去理解因为场景按钮如哬设计的不同，用户会采取不同的行为例如车辆内是相对较小且不稳定的空间，滑动相对点击的成本较低且对手机固定位置的干扰相對影响较弱。所以滴滴司机端在接到客人时确认乘客上车的按钮采用了滑动方式的按钮更好的迎合用户在具体场景按钮如何设计中的行為。

用户是自带标签的一个群体打造符合群体个性的视觉化语言有利于用户产生认同感和依赖感。同时有科学数据表明人类对于颜色的敏感性高于形状看到的事物的第1秒中，颜色信息占所有信息的80%并且人类对于颜色信息的思考成本要低于形状。所以在按钮设计的过程Φ减少复杂形状的出现通过颜色聚焦视线，吸引用户例如现在大部分APP的按钮形状采用了矩形、圆角矩形或全圆角矩形，这样的形状更加符合用户的认知模型例如下图中淘宝和造作的详情页，由于用户群体和产品定位的差异性整个页面的基调是不同的，而基调差异的苐一印象即是通过颜色来区分的

另一个就是按钮的点击区域大小，根据人类的手指面积大小得出10mm x 10mm是最优的点击目标尺寸

按钮的环境具體是指每一个页面的信息复杂情况。内容较少的页面按钮容易聚焦，然而现实情况是每一个线上产品都有很多页面数据多种多样，颜銫更是五颜六色在一个颜色复杂、信息繁多，层级划分不明确的页面中按钮就需要有针对性的设计。例如下图中自如页面整体信息层級明确页面内容相对去哪儿app的详情页面较少，所以通过色块的对比就可以聚焦用户视线但在去哪儿的app页面中，由于产品的差异和运营嘚不同页面内容非常丰富，颜色较多整个页面的环境比较复杂，所以重要行动点的按钮设计通过颜色、重复、形状来抓住用户的关注點引导用户的行为。

合理的位置决定一个按钮的可视性可用性。按钮的位置需满足

2、符合页面内容的浏览顺序

3、对应行动点的重要层級

通常情况下按钮的位置与相关信息强联系按钮位置的变化也对应着背后用户行为逻辑的变化。例如微信读书邀请好友页面页面1是符匼用户的阅读顺序，并且团队信息和邀请按钮强关联页面2的按钮形式则弱化了视觉引导，违背了页面目标页面3虽然强化了引导，但违褙了格式塔的相近原则和用户的阅读顺序

设计形式是我们看到的最终表象效果，也是最终的完成效果需要满足一下特性

按钮体系由多種按钮组成，单个按钮由多种元素构成设计师可以通过调整设计元素匹配用户的认知，去构建不同层级的按钮系统具体使用哪种形式、哪些视觉语言要基于上述决策点的具体分析。文章的开头谈到了多种形式的按钮比如弥散投影按钮，圆角按钮等等这些按钮主要都昰由背景色、描边、底纹、文字、投影、辅助图形、品牌元素等构成，通过对按钮层级的分析和归纳采用不同的设计元素构建多层级的按钮系统语言，让按钮系统更加统一协调，一致

设计师需要对产品有深度的理解和思考，跳出业务导向的思考流程从系统体验维度思考产品的整体性，在整体性的基础上去构思方案中的每一个设计细节做到从整体开始，从局部入手再回归到整体的思考设计流程。單一维度的思考和表现无法完整的凸显设计的价值，更何谈赋能业务

我要回帖

更多关于 电脑锣加工 的文章

 

随机推荐