UI 设计标准规范 个人总结

UI 专栏收录该内容
0 篇文章 0 订阅

设计规范介绍

设计规范是适用于人机交互界面设计师,用户体验设计师,前端技术工程师,发布人,支持人员以及运维编辑人员参考,贯穿以用户为中心的设计指导方向,根据界面的特点统一的规范,以达到提升用户体验,控制产品设计质量,提高效率的目的。

制定标准的意义

  •  统一设计风格;色彩;布局。
  • 舒适的色彩搭配;结构布局;操作流程。
  • 整体效果的美观。
  • 便捷:能点选就不输入;能少层级就不多;界面元素一目了然。

web设计的标准

  • 宽度:如果是1280的分辨率,网页设置成1258的会安全一些,正文宽度调整为980px,涉及到有背景图案的专题页时,宽度可设置成1440px,正文宽度调整为980px。
  • 颜色:设计时请使用256web安全色,在photoshop新建文件中最好选择RGB/8位,因为其他模式的色域很宽,颜色范围很广,在不同显示屏失色现象较为严重些。活动专题可根据需求进行调整。
  • 字体:网页正文一律采用宋体12号(12px)字体,标题采用黑体,建议使用12号+14号的混合搭配,英文字体从9px开始就能清晰显示,选择空间很大,10px/11px/12px/13px都是常见的字体大小,字体请使用系统自带字体。例:Tahoma\Aruak\Verdaba (注:建议使用)
  • 布局:版块排版在视觉上尽量符合纵向分割,横向模块间距统一,纵向可根据页面需求适当区分。
  • 栅格:栏目间距8px-10px;产品宽度160px产品间距30px-40px(PS:间距40px应用于二级类目,间距30px应用于三级类目)

iPhone界面尺寸

推荐尺寸:手机端750*1334px (注:如是iPhone X高度增加40px)

                 PAD端1024*768px、2048*1536px

                 PC端一般网站为996px

在PS设计时一般参考iPhone的尺寸进行设计,其他系统的手机尺寸也遵循了iPhone的设计原则,技术只需要在原效果对其进行同比例缩放即可。

手机/PAD字体标准

  • 标题  大小:28像素;字体:微软雅黑 
  • 内容  大小:22像素;字体:微软雅黑 
  • 时间  大小:16像素;   字体:微软雅黑 
  • 菜单  大小:36像素;   字体:宋体

字体色号:尽量使用同样数字色值来区分深浅 如(#000,#333,#999等)

线条色号:尽量使用同样英文字母   如(#aaa,#ccc,#ddd等 )

图标

在设计图标时公共重复使有频率比较高的icon尽量使用PS中形状制作

软件UI设计标准(pc端)

字体:【中文字体】同级菜单,字体大小格式统一,正文一般采用12px,图形字体与标题字体一般采用14px。推荐使用“微软雅黑”和”华文细黑“字体。不宜使用艺术字体,如华文彩云、隶书。【英文字体】默认字体使用“Tahoma”,大小12px。标题字体使用“Trebuchet MS"

文字对齐:表单字段名左对齐,或者中线对齐。

界面配色:

  1. 配色要求:主色调+次主色调+辅色;
  2. 要统一色调,颜色的使用要正确:如安全软件用黄色,高科技软件使用蓝色,环保软件宜用绿色
  3. 界面配色要有对比,在浅色背景上使用深色文字,深色背景上使用浅色文字;
  4. 同一页面,不宜采用3种以上颜色。
  5. 链接应该有3种颜色:未点击,点击中,点击后。

按钮设计:

  1. 宜使用圆色图标、渐变效果;
  2. 图标大小通常为8的倍数,最小图标12px,16px,顶部24px或32px图片;
  3. 图标树的大小是16px,材的大小适合宽度为210px
  4. 保持与系统整体特点以及风格一致;
  5. 使用让用户容易联想到的事物,按钮能清晰表达意思;
  6. 内页中按钮使用平面效果,不使用三维效果图;
  7. 按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,大小相似,标题字体保持一致,在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别;
  8. 按钮应该至少有4种状态效果:点击前鼠标未放在上面时的状态;鼠标放在上面但未点击的状态;点击时状态;不能点击状态;
  9. 按钮上若没有文字,必须提供鼠标悬停提示信息;按钮上有文字但是不足以准确传达按钮的功能时,也应该提供鼠标悬停提示信息;
  10. 操作功能按钮向左对齐,按照使用频度(重要程度)从左到右排列;设置功能按据和帮助按钮向右对齐;
  11. 折叠菜单的标题栏应该做成”展开/折叠“的响应区域,方便鼠标点击;
  12. 有图标和功能说明文字的,实点击图片和说明文字,都可以达到预期的页面;
  13. 相同功能按钮的描述一致性。

文字校验:

  1. 必填项给出必填标识,使用校验机制确保不为空(包括仅有空格的情况)。若必输项未填写结或者填写不符合规则就提交,应给出说明信息并能自动获得焦点;
  2. 非必填项字段,Null插入数据库不会出错,读取显示为正常留空(不能显示为Null)
  3. 焦点从当前输入框移开后,立即对当前输入框进行校验,不合格则给出提示,引导用户更正,身份证号、电子邮箱地址等特定字段的格式须符合需求的规定;
  4. 所有字段必须有长度限制,并在激活输入框时给出明确提示,直到焦点从当前输入框移开,若用户在输入字符达到最大允许的长度后继续输入,则不再响应超出字符。(粘贴超出给出提示)
  5. 密码输入框内容显示为”*“或者“.”;
  6. 用户名输入框应注明是否允许输入汉字等;
  7. 日期显示格式为:yyyy-mm-dd。尽量使用时间控件,并屏蔽手动输入,如果允许手机输入,则不允许字符串、汉字、特殊字符等。不允许截止日期小于开始日期;
  8. 没有类型限制的输入区域,应可录入汉字、字母、数字、特殊字符;
  9. 数值字段只能输入0~9,视情况决定是否可以输入”*“以及”."

 协作平台

前端团队协作平台统一使用“蓝湖”








  • 6
    点赞
  • 0
    评论
  • 17
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
UIDesigner(腾讯公司出品) 在软件设计阶段,交互设计师或者产品经理等常常需要使用一些工具(比如Visio、Axure RP、Flash或者OmniGraffle等)制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势,当然也各有各的缺点啦。那么腾讯CDC是如何设计软件原型的呢?这里向大家介绍我们正在研发的原型设计利器UIDesigner。   首先,先让我们来体验一下UIDesigner制作出来的原型效果。这个原型是一个设置窗体,主要由按钮、复选框、分组框和文本框等控件构成,其中一些按钮还具有响应的动作(如打开另一个界面,关闭窗体等)。如图一所示,这是使用Firework制作出来的交互图。 图一、使用Firework制作出来的设计稿   这种交互图的特点是简单明了,能够表示出各种控件的基本属性(如文本、位置和选中状态等),但它只是一个静态的图片,不能真实表现出每个控件的响应动作,如仅看这张图,是不清楚点击代理服务器设置分组框上的“设置…”按钮会有什么响应的。   那再看看你若使用UIDesigner制作出来的效果:最终输出的是一个EXE可执行文件(见图二左上角),双击运行后就会出现一个与最终实现效果完全一致的窗体(见图二右)。另外,它还是一个具有响应动作的真实原型,例如你若点击了“设置…”按钮,那就会弹出一个新的窗体(见图三)。 图二、使用UIDesinger制作出来的原型 图三、点击“设置…”按钮后弹出的另一窗体   实际上,这个新弹出的窗体都是一个独立的原型,也是由UIDesigner制作出来的。由于它里面的控件同样可以设置下一步的响应动作,所以从总体上来看,众多原型就像一个树状结构,而其中的父节点就是图二中的设置窗体了。这种结构具有一个很大的好处:无论你完成了多个界面的原型,只需要它们之间有链接关系,最后输出的只是一个EXE可执行文件。这样,你可以很方便地与其它人员表达自己的设计思路,让沟通变得更加快捷。   接下来,我们看看这个原型是如何制作出来的。   第一步:建立空白窗体,调整它的大小、风格、标题和Icon 图四、使用UIDesigner制作原型—建立窗体   第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等) 图五、使用UIDesigner制作原型—加入控件   由于UIDesigner具有自动对齐的功能,所以在拖动控件到窗体时就可以完成排版工作,不需要再逐个像素去调整。另外,不单单在加入控件到窗体时,在改变已存在于窗体内的控件的位置或者大小时,自动对齐功能一样会生效。这样,设计者在调整控件大小或者位置时(包括控件与控件,控件与窗体边缘等的距离等情况),工作变得很简单。 图六、使用UIDesigner制作原型—自动对齐功能   第三步:几分钟后,所有的控件都放到窗体并设置好属性了,如下图。 图七、使用UIDesigner制作原型—整体界面效果   此时,设计者就可以使用软件的导出图片或者导出原型功能分享你的设计成果了。当然,现在这种效果还只是一个没有响应动作效果的原型。接下来,我们再给“设置…”按钮加入响应动作。首先,选中“设置…”按钮,然后点击工具栏的“响应”按钮,你将会看到如图八的响应设置窗口。此时,你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果,这里我们选择“打开窗体”,然后在弹出的对话框里指向弹出窗体的文件。最后,点击“完成”按钮即可。 图八、使用UIDesigner制作原型—设置控件的响应动作   到此为止,你就完成了一个与最终实现效果完全一致的高保真原型了。产品经理和开发人员等若想了解你的设计思想就不需要看着长长几页的说明文档了,而只需要运行你输出的原型文件,就可以对你的设计思路一目了然。   UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板库功能,让使用者可以方便地重用以前的设计资源;提供了32个Windows客户端软件常用控件,满足使用者的设计需求;提供了多个属性设置入口,分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然,UIDesigner不是专用来设计QQ的,其它的Windows客户端产品都在它的工作范围之内。总的来说呢,使用UIDesigner来制作原型是很高效的,而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值