• 《军事职业教育百题问答》印发全军试点单位和院校 2019-06-26
  • 辽宁学习十九大精神嵌套页面--辽宁频道--人民网 2019-06-26
  • 【理上网来·喜迎十九大】这五年,精准扶贫改善了乡村社会治理结构 2019-06-24
  • 就凭这样一句,你的思想就非常够呛,无视楼梯 2019-06-18
  • 新疆阿拉山口口岸严防有害生物入境 2019-06-15
  • 调查:六成老人感到幸福,西藏排第一,您家的呢?  2019-06-15
  • 人民日报评论员观察:以全民健康托举全面小康 2019-06-08
  • “蛟龙” 吸引世界目光(砥砺奋进的五年·重大工程巡礼) 2019-05-16
  • 肩负好新时代党的历史使命 2019-05-16
  • 荆楚网增值电信业务许可证 2019-05-14
  • 险!年近八旬老人就医晕倒 赞!医生不顾腰伤抱起抢救(图) 2019-05-14
  • 德国前国门妻子透露:比赛前和他缠绵 比赛中他失误了 2019-05-14
  • 最新奢华时尚手机盘点 2019-05-14
  • 不理解英语为什么要赖着高考。中国若与日、俄、韩、澳、印等国联合办高校,日、俄等国语种同等重要,而且,语种与专业是挂勾的 2019-05-11
  • 兰州大雨!消防出动疏散被困群众  一名孕妇被救出 2019-05-11
  • 等等

    魔兽3寒冰王座游戏页面背景在吗改:发现设计细节,原来单选和多选也有这么多讲究

    等等 设计理论 3253浏览

    电子游戏的作文600 www.geg6.net 上周推送了一篇完整的设计案例《?如何在3天内设计出一款APP》,文章内容大而全,而本期我想再来针对设计中的细节进行研究,尽量让知识有点有面。本期文章主要研究单选和多选控件的设计细节,虽然是很常见的控件设计,但是也是有非常多需要注意的地方。能提炼总结常见事物的一般规律,这本身就是一件值得大家都去做的一件事。

     

    无论是从个性化内容还是用户体验上来讲,控件元素都会在我们的产品设计中扮演重要角色。为特定的内容选择正确的控件可能要比你想象的要难,控件的高度,宽度,样式设计和选项数量都是至关重要的因素。

    为了帮助分解问题,这里给大家列了一个决策树

     

    单选

    Tab选项

    一个分段tab通?;嵊?-6个单选项,它最适合用于图标、数字或短词的导航形式,并被设计成一个水平的容器,容纳等距离的单选内容。

    图标、短词、价格

    • 优点:?将所有选项都摆在一行,对垂直空间的利用率能达到最佳,设计样式也可以做到非常直观,漂亮。
    • 缺点:?它不大适合用在长词,短语或价格上,如果你确实希望将这些内容放在选项中,就必须尝试精简文本。水平空间非常有限,即使是只有少量的选项,有时候你仍然需要决定如何截断文本。

    (译者注:为什么对于底部导航栏的分栏数是2-6个最合适,根据iOS规范中说的,太多的选项卡增加了应用的复杂性,使得信息定位变得困难。选项太少也可能会带来一个问题是界面间的信息流断开,不便于快速触达。请见iOS规范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/ 。另外,还有说法是按钮的大小能决定点击时的舒适度,数量也会影响用户的记忆和学习成本。请见知乎https://www.zhihu.com/question/31103224

     

    列表单选

    最初的单选按钮被用于列表中超过6个选项时,被设计成垂直方向,圆形轮廓,并摆在列表项的开头。后来iOS通过在列表末尾加上一个对勾选中而创造一个新的经典案例。现在最新的一些设计中,选中被设计成在列表选项外加一个描边框形式,用以节省水平空间。

    Android & Web vs iOS vs 描边框模式

    • 优点:?列表单选为内容提供了更多的空间。它们易于阅读,可以容纳多文字,文本可以换行,还可以增加图片。
    • 缺点:?他们往往很占用空间,不适合用在垂直高度受限的页面中。

    一个有趣的事实是,单选按钮是受旧收音机上的按键设计的启发而设计出来的,一个按钮被按下,就会弹出其他按钮。

     

    多选? ??

    标签选择

    标签选择通常用于要从3-6个选项中进行多次选择的情况,它们最适合用一到两个简短的单词或数字。它们设计的形式一般是类似于一个小按钮,通过背景色来区分“开”和“关”。

    尽管谷歌设计规范(译者注:大家可以看看谷歌官方的规范,对于标签设计列举了大量实用原则 https://material.io/design/components/chips.html#filter-chips)建议最好在选中的标签前加上一个勾选标记,但我觉得有颜色作为区分已经够了,这样还能节省水平空间。

    短词标签 vs 带省略号的多词标签 vs 折行标签

    • 优点?节省空间,标签堆砌在一起的具体样式是由文本长度决定的。它们给人的印象是轻量的,有趣的。
    • 缺点?这种形式与tab选项形式有一样的弊端,都不能很好的处理长词。不建议对文本进行折行或者调整大小,因为会不便于用户阅读,使用两行以上的标签会使得每个标签非常难以快速扫描。

     

    列表多选

    列表中的复选框一般应用于6个以上选项进行多选的情况,设计样式通常是在列表开头处设计一个正方形描边框。

    列表中的复选框

    优缺点:?与单选框有一样的优势和弊端。

     

     

    综合来看

    我们很容易陷入到特定组件的设计中,所以我发现最好是从整体上开始思考。然后做出最佳决定,决定使用哪种选择设计最有利于一致性、差异性和层次感。

    水平Tab和标签

    选项背景是tab控件和标签控件之间最大的区别。一个连续的背景帮助用户理解他们必须要选择一个,而一个分离的背景表明他们可以选择多个。

    统一的风格和不统一的风格

    Tab控件和标签控件的设计应该在视觉上彼此相似,并且做到与文本框和按钮不同,以不同的视觉样式帮助达到不同的交互层次结构。

     

    不同的样式风格和相同的样式风格

     

    列表单选和列表多选

    有这么多单选按钮形式可以选择,我发现最好是将单选和复选放在一起才便于比较。iOS端的列表单选勾和描边高亮都是很漂亮的设计,但是与多选框放一起,就会显得不够统一。(译者注:最左侧的单选复选样式和位置相对比较一致,中间的上下都有对勾会让人产生疑惑,而最右侧的方框高亮和左侧复选框设计差异太大。)

    Android & Web vs iOS vs Alternate Pattern

    最后说一点,但并非是最不重要的,就是图片的位置。选择控件一般位于列表项的开头位置,但是,当列表项中有图片时,就有人开始纠结应该是放前面好还是放后面好。这里,我选择将控件保留在开头位置,因为控件是必须存在的,而图片是可选或者可添加的。(译者注:如果在一个设计规范中,选项控件都在左侧,那也应该尽量让其他控件也保持在左侧来保证一致性。)

    Image in the End vs Start Position

     

    最后的想法

    还有一种很好用的选择控件是滚筒(https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/)。当有许多短词并且垂直控件有限时,就可以使用它。建议只在其中放置文本,它的使用要求比较高,在Android和iOS中都很复杂。

    本文翻译已获得作者的正式授权

     

    原文地址:Medium

    译文地址:彩云译设计(公众号)

    原文作者:Linzi Berry

    译者:彩云Sky

     

    转载请注明:电子游戏的作文600 » 发现设计细节,原来单选和多选也有这么多讲究

    登录收藏
     
    你可能喜欢的:
    如何简化你的设计如何简化你的设计
    如何改进注册/登录用户体验如何改进注册/登录用户体验
    交互设计案例分享之指纹识别(附完整交互文档)交互设计案例分享之指纹识别(附完整交互文档)
    全面解析弹窗提醒交互设计全面解析弹窗提醒交互设计
    掌握了这个导航控件,你可以设计80%的应用导航掌握了这个导航控件,你可以设计80%的应用导航
    用户界面中的按钮基本类型用户界面中的按钮基本类型
    谈像素画在终端游戏中的现状,问题及对策分析谈像素画在终端游戏中的现状,问题及对策分析
    鬼话连篇之 —— “标签的使用方法”鬼话连篇之 —— “标签的使用方法”
    关于瓷片区,你需要了解这些设计要点关于瓷片区,你需要了解这些设计要点
    B类订货会设计范式探索B类订货会设计范式探索
    ?
  • 《军事职业教育百题问答》印发全军试点单位和院校 2019-06-26
  • 辽宁学习十九大精神嵌套页面--辽宁频道--人民网 2019-06-26
  • 【理上网来·喜迎十九大】这五年,精准扶贫改善了乡村社会治理结构 2019-06-24
  • 就凭这样一句,你的思想就非常够呛,无视楼梯 2019-06-18
  • 新疆阿拉山口口岸严防有害生物入境 2019-06-15
  • 调查:六成老人感到幸福,西藏排第一,您家的呢?  2019-06-15
  • 人民日报评论员观察:以全民健康托举全面小康 2019-06-08
  • “蛟龙” 吸引世界目光(砥砺奋进的五年·重大工程巡礼) 2019-05-16
  • 肩负好新时代党的历史使命 2019-05-16
  • 荆楚网增值电信业务许可证 2019-05-14
  • 险!年近八旬老人就医晕倒 赞!医生不顾腰伤抱起抢救(图) 2019-05-14
  • 德国前国门妻子透露:比赛前和他缠绵 比赛中他失误了 2019-05-14
  • 最新奢华时尚手机盘点 2019-05-14
  • 不理解英语为什么要赖着高考。中国若与日、俄、韩、澳、印等国联合办高校,日、俄等国语种同等重要,而且,语种与专业是挂勾的 2019-05-11
  • 兰州大雨!消防出动疏散被困群众  一名孕妇被救出 2019-05-11
  • 东莞市常平特威礼品贸易有限公司 爵士vs奇才 里尔克的作品 碧蓝蒙彼利埃怎么样 我叫高达尼姆碎片 提供免费公式规律 麻将机边框装监控 二十二世纪古墓奇兵云播 主机游戏直播设备 pk10计划 12星座幸运日期 西甲28轮巴塞对皇家贝蒂斯回放 比基尼派对百度网盘下载 江苏快三计划老师骗局 湛江麻将技巧 海南七星彩梦册查码