童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

移动端按钮的设计趋势与使用原则

3月15日 不将就投稿
  每天我们都使用着各种APP,使用的时候都是通过各种button的引导来让我们实现操作,做UI和交互的时候,也几乎所有界面都离不开这些button,今天从多维的角度,给大家捋一捋2018移动端的按钮设计趋势、以及从交互体验角度去看按钮设计的是否合适。
  大色块按钮
  大色块按钮现在用的最多的一种样式了,即扁平的填充色块加上文字或ICON,适用于绝大多数地方。
  用法场景:大色块按钮的使用频率特别高,因为它的突出性,所以非常适合用来引导用户操作,如图,第一时间就能锁定视觉焦点,知道下一步的操作
  幽灵按钮
  基本上就是文字加描边的样式,描边按钮的突出性都较弱,但幽灵按钮比起一般描边更加弱化,若有若无,在界面上视觉和谐度更高,但指引性不强。
  用法场景:多用于背景较为丰富的地方,幽灵按钮不会过于抢眼,不会对背景遮挡过多,在一些照片or插画上不会显得过于突兀,由于描边按钮的突出性大大低于大色块按钮,也可以与色块配合使用,使得更加主体分明,需要大量按钮时,善用这样的样式,也不会使得界面颜色占用面积过多、过亮。
  弥散投影按钮
  弥漫投影样式按钮,通常是在大色块按钮的基础上“加工”,在按钮底部添加与按钮同色或者更浅色的柔和的阴影。
  用法场景:通常在大色块按钮的基础上,想让该按钮更突出,或者想让页面层级关系更分明,样式更靓丽,弥漫投影也许适合你。
  渐变色按钮
  一直以来都是大色块纯色按钮居多,最近渐变按钮越来越流行,在靓丽渐变的基础上再增加弥漫投影,会使视觉效果更加出彩。
  用法场景:渐变色按钮的突出性和指引性也非常强,视觉效果也很出彩,但是也要根据产品调性来选择性的使用,渐变中的颜色也一般离不开产品的主色调。
  半透明按钮
  顾名思义,按钮底部色块为半透明,显得比大色块按钮更加轻盈,视觉上和谐度也更高,但指引性不如大色块按钮强。
  用法场景:半透明按钮虽然指引性较差,但是又想把它作为引导,且保持界面的和谐度,在使用半透明按钮的同时避免使用大色块按钮即可。
  半透明按钮也可以配合大色块按钮使用,使得界面主次分明。
  上面从质感层面说了一下按钮的设计趋势,下面从按钮的形状层面说一下按钮的不同形状及特点。
  直角按钮
  直角矩形的按钮,通常适用于较严肃的产品,如金融类的,直角的特性是显得更专业更国际化,但现在使用纯直角的主流产品占比着实不多。
  圆角按钮
  圆矩形的按钮,是当下使用频率最多的按钮了,在直角的单调上多了一些活泼的元素,微微的圆角几乎适用于所有的产品,特性就是比较中肯,即不过于严肃也不过于活泼,但在一套语言中,圆角角度都要保持一致性。
  全圆按钮
  顾名思义,就是圆角的度数达到最大,两边呈半圆。全圆按钮适用于一般较为活泼的产品,特点就是继承了圆形元素的特征,活泼、圆润。
  六边形按钮
  六边形按钮倒是相对比较少见,在游戏或者活动节目才偶有出现,六边形按钮对整体的风格要求也比较高,滥用会显得比较突兀,也可以用在有科技感的界面中。
  通栏按钮
  通栏按钮就是一般置于最下角一个矩形色块,两边紧靠着屏幕两端,特点是指引性特别强,没有什么局限性,比较通用。
  说了那么多按钮的设计趋势和按钮不同形状及特点,下面再给大家说一说使用按钮的时候,需要注意到的问题。
  注意视觉层级
  功能越强,对用户路径更有帮助,相反比较危险的操作,如退出、删除等,视觉上需要弱化。
  注意按钮圆角统一
  同一产品、同层级的按钮,风格、圆度要统一,反之显得页面混乱,一致性差,毫无规范。
  注意按钮大小
  按钮过大会显得不精致,过小不易于识别和点击,一般拇指合适的点击范围,最小在4444px
  注意按钮摆放位置
  一般人的右手比较灵活,右手操作最为习惯,好比拿鼠标的都是右手,所以使用右手用手机的人占大多数,因此重要的按钮,我们放在右边用户操作起来更为方便。
  注意过于花哨
  现在扁平化,讲究的就是简单效率,易于表达,如果按钮过于花哨,就增加了阅读的难度。
  按钮虽然在页面中画面占比不大,但是与视觉和交互体验息息相关,做产品要注重细节,做视觉也一样,因此我们要多加思考,保持怀疑的态度多多推导。我们更“挑剔”,才可以产出更完美。
投诉 评论 转载

功能可见性在用户界面中的使用在获取专业知识和技能的道路上,设计师们会遇到各式各样的专业术语。之前我们已经介绍过一些核心术语的贴子,如可用性和网页设计、商务术语和缩略语、导航元素和色彩词汇等。这篇文章将继续……仪式感体验设计:让用户在产品体验中感受不同价值仪式感作为体验设计传递价值观的一种表达形式,通过用户在体验过程中由产品功能实现交互操作体验心理变化建立,形成对价值观的建立,是给用户带来更高层次的享受。历史趋势与当前环境……如何输出高质量的交互稿?(附带交互稿输出模板。rp)引言交互设计师作为近年兴起的互联网设计岗位之一,具有其岗位产生的背景的特殊性。从交互设计师岗位职能来讲,它是产品与视觉、前端开发的桥梁,是产品研发线上的连接纽带。由于交互设计师……极力追求简单、体验的设计?不妨先了解下复杂度守恒定律“简单”和“体验”是现如今产品宣传的两个核心的的卖点。仔细阅读现在的UI和UX设计相关的文章,你会发现大家对于“简单”有着近乎执着的要求。在如今的设计领域,它们看起来就是政治正……实例解析如何带着交互视觉思维来设计UIUI在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流UI设计方案,总结了一下在方案优化的思考过程,在这里分享给大家。目录:两道思维思维应……产品设计必须知道的交互设计模式很多人在这个信息爆炸的移动时代,更想看到一些所谓的“干货”,干货到底是什么,可以直接拿来上手的是干货吗?还是需要你经过判断和思维转化再处理得到的属于自己的启发?本篇交互模式大家……如何设计网页和APP中的背景?这8种趋势值得借鉴看看2018年,设计师们使用背景的8个主要趋势吧,如果你正在头疼如何设计背景,这8种趋势和样式将是一个不错的参考和指引。在许多设计当中,背景元素常常是设计师在设计早期就开……探索双核心用户下的服务流程设计新思路消费升级伴随着越来越多服务型产品在当今时代竞相绽放,产品所提供的服务怎样能更好地满足用户的胃口?产品定义初期设计者们如何以全局观洞察服务流程中的触点设计?1。透过现象洞察……品牌:设计思维中被忽视的孩子大家好,我是MU。SIR,一个不断自学的不正经设计师。今天这篇译文是关于当今设计中过度强调用户体验而忽视了品牌传达的问题,其实在我自己看来,品牌是任何商业设计主体的核心,……五维自检法:一套图标设计的评判体系最近在做图标的优化调整,虽然改动不大,但在复盘的时候还是总结出很多心得,在这里和大家分享一下。图标是界面设计中最重要的元素之一,也是我们UI设计师必备的技能,日常工作中我……移动端按钮的设计趋势与使用原则每天我们都使用着各种APP,使用的时候都是通过各种button的引导来让我们实现操作,做UI和交互的时候,也几乎所有界面都离不开这些button,今天从多维的角度,给大家捋一捋……什么是用户界面和体验设计?这里有4点想法用户界面是人与机器交流的媒介,用户向机器发出指令,机器随即开始一段进程,回复信息,并给出反馈,用户可以根据用户反馈进行下一步操作的决策。体验设计注重产品的全局架构和功能,以及用……
复盘:出行类产品怎么做改版设计?产品进阶设计思路:业务的抽象建模如何设计一款医疗应用,帮助医生跟进患者状况?天猫,为什么总能“猜”到我想买啥?产品创新如何做?原来被需要才是主旋律产品经理,你该如何提升产品决策质量?如何运用设计思维构建UI作品集?用户体验设计之路(三):原型是设计的表达买房助手产品思路:大数据机器学习AI置业顾问供应链:WMS出库管理为什么你的产品做了没人用?社区电商平台的权限系统设计

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界