界面设计中需要注意的小细节

uidec他(她)的空间>>4年前来源:UI中国

人气1494

包括、如何深入?

我们常说“决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括呢?如何去深入呢?

界面设计中需要注意的小细节

 

 

界面设计中的“方块”

uidec他(她)的空间>>4年前来源:UI中国

人气0

翻译:martinRGB

界面设计中的“方块”

 

 

界面设计中的“方块”

 

 

界面设计中的“方块”

 

 

界面设计必备,常用字体规范

uidec他(她)的空间>>4年前来源:UI中国

人气11

界面设计必备,常用字体规范


作者:王铎(MICU设计)

好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事。

这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……”

这个,好吧,那就直接说说能用的知识:

也许你会说:?也太Low了吧,这个谁不知道重要呀。

对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗?

很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。
拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。
这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。

一.成也字,败也字


在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

我们常常会听到,这也太LOW了吧!!你能统一一下字体吗?

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说,字体可以成就设计也可以毁掉设计。


界面设计必备,常用字体规范


问题的关键有:


1.字体样式太多,导致页面杂乱

2.使用的字体不易识别

3.字体样式和内容的气氛或规范不匹配

怎么避免这样的结果发生呢?
通过设计经验可以帮助你做出更好的版式

了解不同平台的常用字体设计规范

在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。

不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。

字体与背景的层次要分明

确保字体样式与色调气氛相匹配


二.界面中文字使用的规则


在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。

以下是在  72像素/英寸  下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。

界面设计必备,常用字体规范


Android

英文字体:Roboto

中文字体:Noto

界面设计必备,常用字体规范

移动端常用的的字号有哪些呢?

导航主标题字号:40-42px

我一般设计就用40px,偏小的40px字号,显得精致些。

界面设计必备,常用字体规范

在内文展示中字号大小又是多大呢?

大的正文字号32px,
副文是26px,小字20px
在内文的使用中,根据不同类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。

界面设计必备,常用字体规范

而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20px

界面设计必备,常用字体规范

26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。

界面设计必备,常用字体规范

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体。

(见下图中的退出按钮)

界面设计必备,常用字体规范

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。这个详细缘由大家可以网上查询,我就不在这一一的介绍了。

常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。

网页端

常用的字号有哪些呢?

网页中文字字号一般都是宋体12px或14px(无状态),大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px,一般使用双数字号,单数的字体在显示的时候会有毛边。

常用的字体

1.平平稳稳:微软雅黑/方正中黑


微软雅黑系列:在网页设计中这款字体使用的非常平凡,这款只无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。

界面设计必备,常用字体规范


方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读。

界面设计必备,常用字体规范


2.与时俱进:方正兰亭系列


方正兰亭系列: 个人最推荐的就是这个系类的字体,整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁,这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合,不仅能保证字体的统一感,还能很好的区分出文本的层次。

界面设计必备,常用字体规范

3.刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中,他们有着共同的特点,字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式,让文字显得更为活力。在这三种字体中,菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松,更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多,效果比较突出。

界面设计必备,常用字体规范

毛笔字生成器


通过自由的书法网站在线生成。在网址中输入文本,再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。

界面设计必备,常用字体规范

推荐大家几个毛笔字相关的网站:

http://www.51poca.com/

http://www.epinv.com/online/

http://www.akuziti.com/mb/


和大家简单操作一下毛笔字的使用方法。

将下载下来的字体图片AI转路径,编辑文字。

首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。

界面设计必备,常用字体规范

选中拉入图片,点击[图像描摹]

界面设计必备,常用字体规范

然后继续点击[扩展]按钮

界面设计必备,常用字体规范

扩展完毕后,图片已经都变成了路径。

界面设计必备,常用字体规范

使用魔棒选择颜色就可以将文字的路径提选出来。

界面设计必备,常用字体规范

最后经过设计后的Banner效果,这就是我经常用的Banner风格,你们也试试吧~

界面设计必备,常用字体规范


重要提示,怎么找不认识的字体名称?


很多朋友会看到别人使用的字体非常好看,但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。网址:http://www.qiuziti.com/


界面设计必备,常用字体规范

三.常用字体颜色

字体颜色又有哪些常用的颜色呢?

在界面中的文字分为三个层级,主文、副文、提示文案等。

在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。

常用的色值是#333333;#666666;#999999


界面设计必备,常用字体规范

在界面中还经常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。

界面设计必备,常用字体规范

在我们做设计的时候,字体和图库均是有版权的,请注意合法使用。

设计的时候我们还可以将字体进行变形来达到宣传的目的,这个需要设计师对字体设计有一定的了解。

总之,设计是要有规范,有体系的。使用规范化的设计对产品的延续性非常有帮助,并且保证了产品的独特性和一致性。所以,大家要在设计初期找到风格和规范,这样做出来的界面才会统一一致,在变化的需求中找到定量,调整起来也相对轻松很多。


    【本文由Micu设计原创发布,转载请注明作者:Micu设计,请加上二维码】

    界面设计必备,常用字体规范

     

界面设计须注意的几个要点

uidec他(她)的空间>>4年前来源:uimarker

人气1

 

  

目前流行的风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。

1.易用性

名称应该易懂,用词准确,屏弃没楞两可的字眼,要与同一上的其他易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的并进行相关的正确操作。

易用性细则:

  1. 完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。
  2. 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
  3. 按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
  4. 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
  5. 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
  6. 同一界面上的控件数最好不要超过劳过度10个,多于10个时可以考虑使用分页界面显示。
  7. 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab
  8. 默认按钮要支持Enter及选操作,即按Enter后自动执行默认按钮对应操作。
  9. 可写控件检测到非法输入后应给出说明并能自动获得焦点。
  10. Tab键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。
  11. 复选框和选项框按选择几率的高底而先后排列。
  12. 复选框和选项框要有默认选项,并支持Tab选择。
  13. 选项数相同时多用选项框而不用下拉列表框。
  14. 界面空间较小时使用下拉框而不用选项框。
  15. 选项数叫少时使用选项框,相反使用下拉列表框。
  16. 专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

2.规范性

通常界面设计都按Windows界面的规范来设计,即包含"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单"的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则:

  1. 常用菜单要有命令快捷方式。
  2. 完成相同或相近功能的菜单用横线隔开放在同一位置。
  3. 菜单前的图标能直观的代表要完成的操作。
  4. 菜单深度一般要求最多控制在三层以内。
  5. 工具栏要求可以根据用户的要求自己选择定制。
  6. 相同或相近功能的工具栏放在一起。
  7. 工具栏中的每一个按钮要有及时提示信息。
  8. 一条工具栏的长度最长不能超出屏幕宽度。
  9. 工具栏的图标能直观的代表要完成的操作。
  10. 系统常用的工具栏设置默认放置位置。
  11. 工具栏太多时可以考虑使用工具厢。
  12. 工具箱要具有可增减性,由用户自己根据需求定制。
  13. 工具箱的默认总宽度不要超过屏幕宽度的1/5。
  14. 状态条要能显示用户切实需要的信息,常用的有:
    目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。
  15. 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
  16. 状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。
  17. 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
  18. 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。
  19. 右键快捷菜单采用与菜单相同的准则。

3.帮助设施

系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则:

  1. 帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明,让人困惑)。
  2. 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
  3. 操作时要提供及时调用系统帮助的功能。常用F1。
  4. 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。
  5. 最好提供目前流行的联机帮助格式或HTML帮助格式。
  6. 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
  7. 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
  8. 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

4.合理性

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:

  1. 父窗体或主窗体的中心位置应该在对角线焦点附近。
  2. 子窗体位置应该在主窗体的左上角或正中。
  3. 多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。
  4. 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
  5. 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
  6. 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。
  7. 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
  8. 非法的输入或操作应有足够的提示说明。
  9. 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
  10. 提示、警告、或错误说明应该清楚、明了、恰当。
  11. 5.美观与协调性

    界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

    美观与协调性细则:

    1. 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
    2. 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
    3. 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
    4. 按钮的大小要与界面的大小和空间要协调。
    5. 避免空旷的界面上放置很大的按钮。
    6. 放置完控件后界面不应有很大的空缺位置。
    7. 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
    8. 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。
    9. 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
    10. 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
    11. 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
    12. 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。
    13. 对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。
    14. 通常父窗体支持缩放时,子窗体没有必要缩放。
    15. 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

    6.菜单位置

    菜单是界面上最重要的元素,菜单位置按照按功能来组织。

    菜单设测试细则:

    1. 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。
    2. 常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。
    3. 下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。
    4. 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
    5. 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。
    6. 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
    7. 菜单深度一般要求最多控制在三层以内。
    8. 对常用的菜单要有快捷命令方式,组合原则见8。
    9. 对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。
    10. 菜单前的图标不宜太大,与字高保持一直最好。
    11. 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。
    12. 主菜单数目不应太多,最好为单排布置。

    7.独特性

    如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

    1. 安装界面上应有单位介绍或产品介绍,并有自己的图标。
    2. 主界面,最好是大多数界面上要有公司图标。
    3. 登录界面上要有本产品的标志,同时包含公司图标。
    4. 帮助菜单的"关于"中应有版权和产品信息。
    5. 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

    8.快捷方式的组合

    在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。

    菜单中:

    1. 面向事务的组合有:
      Ctrl-D 删除 ;Ctrl-F 寻找 ;Ctrl –H替换;Ctrl-I 插入 ;Ctrl-N 新记录 ;Ctrl-S 保存 Ctrl-O 打开。
    2. 列表:
      Ctrl-R ,Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件。
    3. 编辑:
      Ctrl-A全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z撤消操作;Ctrl-Y恢复操作。
    4. 文件操作:
      Ctrl-P 打印;Ctrl-W 关闭。
    5. 系统菜单:
      Alt-A文件;Alt-E编辑;Alt-T工具;Alt-W窗口;Alt-H帮助。
    6. MS Windows保留键:
      Ctrl-Esc 任务列表 ;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 ;Enter 缺省按钮/确认操作 ;Esc 取消按钮/取消操作 ;Shift-F1 上下文相关帮助 。

    按钮中:

    可以根据系统需要而调节,以下只是常用的组合。
    Alt-Y确定(是);Alt-C取消;Alt-N 否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。
    这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

    9.安全性考虑

    在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

    安全性细则:

    1. 最重要的是排除可能会使应用非正常中止的错误。
    2. 应当注意尽可能避免用户无意录入无效的数据。
    3. 采用相关控件限制用户输入值的种类。
    4. 当用户作出选择的可能性只有两个时,可以采用单选框。
    5. 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
    6. 当选项特别多时,可以采用列表框,下拉式列表框。
    7. 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。
    8. 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
    9. 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
    10. 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
    11. 对错误操作最好支持可逆性处理,如取消系列操作。
    12. 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
    13. 对可能造成等待时间较长的操作应该提供取消功能。
    14. 特殊字符常有;;'"><,`':"["{、|}]+=)-(_*&&^%$#@!~,.。?/还有空格。
    15. 与系统采用的保留字符冲突的要加以限制。
    16. 在读入用户所输入的信息时,根据需要选择是否去掉前后空格。
    17. 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

    10.多窗口的应用与系统资源

    设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。

    1. 在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。
    2. 在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源。
    3. 关闭所有窗体,系统退出后要释放所占的所有系统资源 ,除非是需要后台运行的系统。
    4. 尽量防止对系统的独占使用。

 

  

目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。

1.易用性

按钮名称应该易懂,用词准确,屏弃没楞两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:

  1. 完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。
  2. 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
  3. 按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
  4. 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
  5. 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
  6. 同一界面上的控件数最好不要超过劳过度10个,多于10个时可以考虑使用分页界面显示。
  7. 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab
  8. 默认按钮要支持Enter及选操作,即按Enter后自动执行默认按钮对应操作。
  9. 可写控件检测到非法输入后应给出说明并能自动获得焦点。
  10. Tab键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。
  11. 复选框和选项框按选择几率的高底而先后排列。
  12. 复选框和选项框要有默认选项,并支持Tab选择。
  13. 选项数相同时多用选项框而不用下拉列表框。
  14. 界面空间较小时使用下拉框而不用选项框。
  15. 选项数叫少时使用选项框,相反使用下拉列表框。
  16. 专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

2.规范性

通常界面设计都按Windows界面的规范来设计,即包含"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单"的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则:

  1. 常用菜单要有命令快捷方式。
  2. 完成相同或相近功能的菜单用横线隔开放在同一位置。
  3. 菜单前的图标能直观的代表要完成的操作。
  4. 菜单深度一般要求最多控制在三层以内。
  5. 工具栏要求可以根据用户的要求自己选择定制。
  6. 相同或相近功能的工具栏放在一起。
  7. 工具栏中的每一个按钮要有及时提示信息。
  8. 一条工具栏的长度最长不能超出屏幕宽度。
  9. 工具栏的图标能直观的代表要完成的操作。
  10. 系统常用的工具栏设置默认放置位置。
  11. 工具栏太多时可以考虑使用工具厢。
  12. 工具箱要具有可增减性,由用户自己根据需求定制。
  13. 工具箱的默认总宽度不要超过屏幕宽度的1/5。
  14. 状态条要能显示用户切实需要的信息,常用的有:
    目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。
  15. 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
  16. 状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。
  17. 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
  18. 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。
  19. 右键快捷菜单采用与菜单相同的准则。

3.帮助设施

系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则:

  1. 帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明,让人困惑)。
  2. 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
  3. 操作时要提供及时调用系统帮助的功能。常用F1。
  4. 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。
  5. 最好提供目前流行的联机帮助格式或HTML帮助格式。
  6. 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
  7. 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
  8. 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

4.合理性

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:

  1. 父窗体或主窗体的中心位置应该在对角线焦点附近。
  2. 子窗体位置应该在主窗体的左上角或正中。
  3. 多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。
  4. 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
  5. 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
  6. 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。
  7. 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
  8. 非法的输入或操作应有足够的提示说明。
  9. 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
  10. 提示、警告、或错误说明应该清楚、明了、恰当。
  11. 5.美观与协调性

    界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

    美观与协调性细则:

    1. 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
    2. 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
    3. 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
    4. 按钮的大小要与界面的大小和空间要协调。
    5. 避免空旷的界面上放置很大的按钮。
    6. 放置完控件后界面不应有很大的空缺位置。
    7. 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
    8. 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。
    9. 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
    10. 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
    11. 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
    12. 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。
    13. 对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。
    14. 通常父窗体支持缩放时,子窗体没有必要缩放。
    15. 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

    6.菜单位置

    菜单是界面上最重要的元素,菜单位置按照按功能来组织。

    菜单设测试细则:

    1. 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。
    2. 常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。
    3. 下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。
    4. 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
    5. 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。
    6. 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
    7. 菜单深度一般要求最多控制在三层以内。
    8. 对常用的菜单要有快捷命令方式,组合原则见8。
    9. 对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。
    10. 菜单前的图标不宜太大,与字高保持一直最好。
    11. 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。
    12. 主菜单数目不应太多,最好为单排布置。

    7.独特性

    如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

    1. 安装界面上应有单位介绍或产品介绍,并有自己的图标。
    2. 主界面,最好是大多数界面上要有公司图标。
    3. 登录界面上要有本产品的标志,同时包含公司图标。
    4. 帮助菜单的"关于"中应有版权和产品信息。
    5. 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

    8.快捷方式的组合

    在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。

    菜单中:

    1. 面向事务的组合有:
      Ctrl-D 删除 ;Ctrl-F 寻找 ;Ctrl –H替换;Ctrl-I 插入 ;Ctrl-N 新记录 ;Ctrl-S 保存 Ctrl-O 打开。
    2. 列表:
      Ctrl-R ,Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件。
    3. 编辑:
      Ctrl-A全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z撤消操作;Ctrl-Y恢复操作。
    4. 文件操作:
      Ctrl-P 打印;Ctrl-W 关闭。
    5. 系统菜单:
      Alt-A文件;Alt-E编辑;Alt-T工具;Alt-W窗口;Alt-H帮助。
    6. MS Windows保留键:
      Ctrl-Esc 任务列表 ;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 ;Enter 缺省按钮/确认操作 ;Esc 取消按钮/取消操作 ;Shift-F1 上下文相关帮助 。

    按钮中:

    可以根据系统需要而调节,以下只是常用的组合。
    Alt-Y确定(是);Alt-C取消;Alt-N 否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。
    这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

    9.安全性考虑

    在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

    安全性细则:

    1. 最重要的是排除可能会使应用非正常中止的错误。
    2. 应当注意尽可能避免用户无意录入无效的数据。
    3. 采用相关控件限制用户输入值的种类。
    4. 当用户作出选择的可能性只有两个时,可以采用单选框。
    5. 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
    6. 当选项特别多时,可以采用列表框,下拉式列表框。
    7. 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。
    8. 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
    9. 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
    10. 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
    11. 对错误操作最好支持可逆性处理,如取消系列操作。
    12. 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
    13. 对可能造成等待时间较长的操作应该提供取消功能。
    14. 特殊字符常有;;'"><,`':"["{、|}]+=)-(_*&&^%$#@!~,.。?/还有空格。
    15. 与系统采用的保留字符冲突的要加以限制。
    16. 在读入用户所输入的信息时,根据需要选择是否去掉前后空格。
    17. 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

    10.多窗口的应用与系统资源

    设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。

    1. 在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。
    2. 在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源。
    3. 关闭所有窗体,系统退出后要释放所占的所有系统资源 ,除非是需要后台运行的系统。
    4. 尽量防止对系统的独占使用。

     

界面设计之图标设计规范

uidec他(她)的空间>>4年前来源:uimarker

人气0

 

界面设计之图标设计规范

       应该有趣、色彩丰富且充满活力,因为现在的系统支持是32位图标,并且边缘非常平滑。在矢量程序中绘制完每个图标后,再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为编写的。在创建图像时,建议您与高水平的图形设计者一起工作,尤其是具有丰富的矢量和3D软件经验的图形设计者。  

图标设计概述的目的是让您熟悉WindowsXP的新样式,为创建图标做好准备。  

  图标样式特性 

(1) 色彩丰富,是对WindowsXP外观的补充。 
(2) 不同的角度和透视特性为图像增添了动态活力。 
(3) 元素的边角十分柔和,并略微有些圆滑。 
(4) 光源位于图标的左上角,同时有环绕光照亮图标的其它部分。 
(5) 渐变效果使图标具有立体感,进而使图标的外观更加丰满。 
(6) 投影使图标更具对比度和立体感。 
(7) 添加轮廓可使图像更清晰。 
(8) 日常对象(如计算机和设备)具有更现代化的个人外观。  

  图标尺寸 

Windows XP图标有四种尺寸,建议使用以下四种尺寸: 
(1) 48×48像素 
(2) 32×32像素 
(3) 24×24像素 
(4) 16×16像素  

  图标色彩深度支持 

WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑,且与背景相融合。 
每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置: 
24位图像加上8位alpha通道(32位) 
8位图像(256色),加上1位透明色 
4位图像(16色),加上1位透明色  

  调色板 

图标中使用的主要颜色。  

  对象的角度和分组 

WindowsXP样式图标使用的透视网格:并非所有对象使用16×16的复杂图像都能获得较好效果。某些对象通常以直观图像显示:文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)  

除非创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性而言,还是应使用直观图像。还应考虑如何按组查看图标,以便确定如何将对象分组。  

  投影 

使用投影后,WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果,本指南的后面部分将对此进行描述。若要为图像添加投影,请在 Photoshop中双击图像的图层,并选择Drop Shadow。然后将Angle更改为135,Distance更改为 2,Size更改为2。此时投影为75%不透明黑色。  

  轮廓 

绘制XP样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景色上都具有较好效果。  

  概念 

设计图标时,请考虑以下因素: 
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现,以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时,请尽可能使其大众化。如果图标中的图像由多个对象组成,应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16的尺寸大小,还可考虑删除某些对象或简化图像使之更容易辨认。  

  透明工具 

将Gif Movie Gear(GMG)打开一个对话框,其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标,请选择 File->Save Icon As...。  

  创建工具栏 

Windows工具栏图标除不使用投影之外,使用的样式与其它图标相同。由于工具栏图标非常小,建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义,则不必使用其它复杂方式。  

  创建AVI 

WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像,然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI,请转至File->Export As->AVI file。

      创建.avi文件时,请考虑以下因素:使用品红(R255 G0 B255)作为背景透明色。在Photoshop中,重要的一点是不要出现杂散像素。请将填充能力设置为0,并确认未选中取消锯齿。

 

     
TA的上传
  • 红色风格企业后台管理系统界面设计
  • 4张后台管理系统界面UI
  • 几张系统管理登录页设计
  • 国家电网管理系统后台界面
  • 简约大气后台登录页
  • 员工考勤系统后台界面
  • 飞哥网站
  • 一起海带APP设计
  • 扁平风格手机主题UI
  • 25个优秀UI图标ICON设计作品
查看全部

只有登录之后才可以评论,请点击进行登录

全部评论: 0

登录

忘记密码

如果您尚未注册,请选择以下方式登录

Q Q 登 录 微 博 登 录
已有账号?快去登录>>

注册