zoukankan      html  css  js  c++  java
  • 浅谈软件界面设计原则

      在设计软件的界面时,我们往往觉得界面的变化万千,需要根据具体的业务逻辑和功能来设计界面,简而言之就是具体情况具体分析。有时还要靠灵感、创意。同一软件不同人设计出来的界面往往也大不相同,软件的界面可能是没有统一套路的。但我总结了一些套路,有了这些套路,可以让你在大的方向上不会错,帮你节省时间。在套路的基础上发挥灵感与创意,更可能设计出好的软件界面。

    一些原则

    • 美观、大方、易用、既要高大上,还要接地气 (本文不讲这些)
    • 不能反人类,比如左右相反,上下倒置,旋转角度。比如鼠标往上移,光标却往下。比如软件上显示的文字上下相反。
    • 界面上要让用户看到后能直观地理解,软件想告诉用户什么信息。
    • 界面要让用户知道操作哪里,怎么操作会得到想要的结果。
    • 操作要尽量简单,这里列出一些原则:
      • 能选不填。能让用户选的就尽量不要让用户填写。
      • 选项之间总是要有一定的顺序
      • 选项多到一定程度要分组。还记得QQ的好友分组么?
      • 选择非常多,要有搜索功能
      • 有规律的选择,采用专用控件,支持滚动。比如选择日期。

    数量与输入方式

      只有有限的几个值,不要让用户填,而要让用户选择。
      二选一:采用2个单选框,或者1个复选框,不让用户去填,比如填“对”和“错”。打字没有选择方便,况且还要写逻辑去避免用户乱填。
      少量有限值:单选列表或复选列表。地方(可用于显示的面积)够大就铺开,不够大就收起来,收起来即是下拉列表。因为下拉列表总是要先点一下展开列表,而铺开不需要,所以在有条件的时候还是铺开,让用户少点一下,方便用户。选项总数范围参考:3~20

      当选项超过20~40个时,要将一次选择换成多次选择。比如要选择一个区,通常是先选省,再选市 ,最后再选区。比如Windows的菜单,也是分多级。选项总数范围参考:20~100。而且每一级的选项最好在5~20这个范围,太少了选择的效率低,意味着更多级的选择,太多了难选难操作。比如100选一,就推荐设计成两级。

      当选项超过50~70个时,往往还要提供搜索功能,模糊搜索。

      当填写的值有很多个的时候,比如某会员系统的会员卡号可能达到几百几千个,则不合适通过选择来完成,就得让用户填写了。可以在用户填写了一部分时,列出可能的列表,让用户从中选一个,避免用户输入太多字符,同时如果用户输入错误,则得不到列表,能及时帮用户发现和纠正输入的错误。

      有规律的,连续的值,既要支持选择,也要支持手输。如日期、时间。距离近的选择快,远的手输快。比如日期默认是今天,要想定位到昨天,用选择的快,要想定位十几年前某天(如生日),还是输入的快。有些软件强制用户“只能选择不能输入”,这种做法不可取。

      图片的放大缩小,永远要保持纵横比。图片的观看要允许左右旋转90度。一般还要支持放大与缩小。

      输入一个比率,可以进滑动条或进度条,如果要支持精确,可以显示数值和接受输入数值。

    状态与操作

      两个状态之间的切换的样子有很多,比如灯泡的亮与灭,播放与暂停。这里面有个状态与操作的关系。灯亮时只有关的操作是有效的,灯灭时只有“开”的操作是有效的。如果用两个控件同时显示灯的状态和操作按钮,当然没问题,只是不够简洁。许多情况下要合并状态与操作成为一个控件,通常是一个按钮(或等价于一个按钮),那么按钮的显示内容是什么呢?比如灯灭的情况,是显示“灭”(状态)还是显示“开”(操作)呢?不同的软件的做法出现了分歧。多数是显示操作,比如播放器暂停时显示的不是“暂停”,而是“播放”,就是那个向右的三角符号。而点了按钮后状态变成“播放中”,显示变成“暂停”,即是两竖线。

      手机上的二态开关则是这么做的?当状态为开的时候,显示绿色,圆在右边,反之状态为关的时候,显示为灰色,圆在左边。可以看作是用两种颜色来表示状态,并且不使用文字或符号来表示操作,而是统一的图形(圆)的左、右两个位置来表示操作(其实也可以看作是状态),巧妙地避开了状态与操作的不一致性。

      一些软件中,还是简单地使用文字,有些文字表示状态,有些文字表示操作。图案也和文字类似,并且有些情况看起来是相反的。以后遇到二态的情况,要留意喽。别让用户摸不着头脑。

      三选一,通常是做成下拉列表,在非下拉的时候,显示什么呢?就是显示当着选中的那个。比如音乐播放器的:顺序、随机和单曲循环。比如当前是“顺序”,用户点了“顺序”,再选择其它项。这个也可以推广到三个以上的情况。但如果选项很少,比如5个以内,可以在用户点击时直接切换到下一个,前提是这种切换不会产生副作用。比如用户想从“顺序”变成“单曲循环”,点了一下变成“随机”后,再点一下变成“单曲循环”,中间的“随机”状态不会带来副作用。假如切换到“随机”时随机播放了另一曲,则再切换到“单曲循环”时就不是用户想要的那个单曲的,这个就是副作用。

    键盘与鼠标

      键盘的优势是键多,可以充分调动10个手指,所以打字时键盘速度远超鼠标。鼠标的优势是能跟随手的物理移动速度,既能在大范围内快速移动,也能在小范围内精确定位。如果用键盘定位,就得使得不同的按键对就应不同的速度,比如方向下键光标下移一行,而PageDown键光标下移一页,这种办法除了不能移动0.5行之类的问题之外,还有一个很大的缺点是不同的速度需要按不同的键,操作非常不便。好处是,一行就是准确的一行,不会是0.9行。如果鼠标来打字,就得有虚拟键盘。鼠标难以快速准确地点击虚拟键盘来打字,大概是这几个原因:1.鼠标是按键是跟着鼠标跑的,相对于手不动的,所以鼠标的移动变成了点击虚拟键盘正确与否的关键。2.键盘是有触感的,鼠标(光标)在虚拟键盘的两个键之间移到是没有触感的。3.键盘的键大小与距离是按照人手指来设计的,有标准尺寸的,而鼠标移动多大距离对应虚拟键盘中两个键的距离是没有标准的,受多种因素影响(调节)的。4.键盘打字时,移动的是手指,鼠标打字时移动的是手掌,两者的惯性大小不一样,需要的能量不一样,敏捷度也大不一样。

    讨论键盘和鼠标,是通过分析两者的特性,更好地选择它们在不同场合为输入带来方便。有机会再铺开来讲。

    其它输入方式

      录入文字,除了键盘和鼠标,至少还有两种输入方式。第1种是语音输入,即是通过麦克风将收到的声音通过AI翻译成文字。在环境声音干扰不大,AI训练成熟,说话人发音标准的情况下,正确率很高,接近百分百。速度比键盘输入要快很多。遇到偏僻字,或冷门词语,正确率就大打折扣。第2种是图片识字,通常叫OCR。与语音输入类似。字越工整,图片越清晰,识别率越高。甚至有些OCR软件还能识别一定的格式,比如表格。

       前端交互设计我不是专业的,懂得很浅。就当我是个用户,说的是我从用户的角度体验到的关于界面的道理。我把自己仅会的那点知识,整理记录下来。时间仓促,水平有限,请不吝指正。本文会继续完善的。


    博主简介:佘焕敏(shé),洋名 Billy Sir。
    关注编程基础技术,并致力于研究软件的自动化生成。 对编程规范化、面向对象的极致使用也有着浓厚的兴趣。 同时非常希望能够写程序到65岁。
    只有工匠精神,才能把常人觉得单调乏味的代码,当作作品雕刻成艺术品。
  • 相关阅读:
    「日常训练」Bad Luck Island(Codeforces Round 301 Div.2 D)
    「日常训练」Ice Cave(Codeforces Round 301 Div.2 C)
    「日常训练」School Marks(Codeforces Round 301 Div.2 B)
    「知识学习」二分图的最大匹配、完美匹配和匈牙利算法(HDU-2063)
    「日常训练」 Counting Cliques(HDU-5952)
    「日常训练」Maximum Multiple(HDU-6298)
    「日常训练」 Yukari's Birthday(ZOJ-3665)
    「Python」Numpy equivalent of MATLAB's cell array
    「Python」Convert map object to numpy array in python 3
    「Python」matplotlib备忘录
  • 原文地址:https://www.cnblogs.com/BillySir/p/13064748.html
Copyright © 2011-2022 走看看