web原型设计规范-Web UI设计规范及界面实现注意事项

第一次绘制原型图的时候觉得主要功能表达清晰即可,尺寸大小、元件间距全凭感觉,因此一开始也挨了不少骂。后来慢慢摸索出规律,大概总结如下:

端口类型:

目前长需设计的端口分为:web段(即网页)、移动端(APP、小程序等移动设备)、IPAD(IPAD是一种移动设备,但也有自己特定的尺寸),智能设备(例如智能电视、智能手表等等)

由于我更多接触的是网页端已经小程序端口,后面会以这两个为主。

网页端:

目前市面上显示器屏幕尺寸为19-21寸,屏幕分辨率大概在1280px*800px―1440px*900px之间,前端工程师在写页面的时候,宽度一般设为1180px―1220px(当然,这个宽度也不是绝对固定的)。

因此在做产品设计的时候,设计web端产品,宽度会设为1400px作为容器,位于容器上方再画一个1200px的矩形,内容区域的容器。(PS:内容区域的矩形需与底部容器左右间隔10px,作为留白)

可能有人会问,为什么要底部容器上面划出一块内容区域?

首先,我们要知道, 容器决定产品的边界 :

我的理解是:

按照市面上显示器的分辨率,前端页面可展示的内容区域,平均宽度在1200px,预留出来的空白部分,是为显示器较大的人群考虑的:屏幕越大,可展示的区域也越大,超过产品本身内容可展示区域的话,会自动留白。

另一方面,为保证开发团队的成员可查看完整的原型图,我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。

稍稍总结下,就是跟随大多数人的屏幕尺寸大小,以及方便开发团队查看。

给大家看我电脑上查看大的原型图大小,是不是很清晰的看到内容呢?当然,这也是我个人的看法,如果有别的看法的,可以互相交流交流 (我算是个野路子的产品) 。

至于高度的问题,这个是没有要求的,一般都是根据需要展示的内容来决定的,也就是高度自适应。

讲完容器的宽度,接下来讲讲字体。正常情况下,字体大小都是14px,最小字体12px(字体太小可能就不方便查看)。

字体上,我所在的企业并没有太多要求,只要求能看懂主要功能就行,所以上面的字体是来自一位B站的up总结的。

移动端:

说明之前,给大家感受下刚入门时候,画的线框图,话不多说,先上图。

(OS:简直惨不忍睹,当然这并不是给开发的图纸,而是草稿。由于各种问题,我需要兼顾产品跟UI设计,所以都是输入高保真原型图的)

虽然最终效果跟第一版草稿的差距特别大,但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了,可以了。有这样的想法,那你离被开发揍一顿就不远了。

以自己一开始的惨痛经历说了这么多,接下来聊一聊移动端的设计规范。

常见的移动端多是手机,基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px,最小字体一般是12px(你懂的,手机屏幕小,字体太小用户也很难看清的)

上图是我个人画线框图的习惯,并不是标准,只是提供个参考给大家。各个区域的底色,也只是为了便于自己区分,实际上底色并没有什么特别多的要求。至于字体,一般都是使用14px的字体。

产品在原型设计上还是有很多规范的,只不过我就职的企业并没有太多要求,但基本也算通用了,具体情况还是看看自己企业内部有没有什么特别的要求。

上述的设计规范仅限于个人习惯,也是非常基础的部分。如果有别的见解也可以一起分享。像容器内,各类原件的一些规范,后续也会慢慢整理出来。

适用于WEB产品线的人机交互界面的设计,贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范,以达到提升用户体验,控制产品设计质量,提高设计效率的目的。

适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等

1.【统一识别】规范能使页面相同属性单元统一识别,防止混乱,甚至出现严重错误,避免用户在浏览时理解困难。

2.【节约资源】除了门户网站、活动推广等个性页面外,相对于后台系统、物联网系统、数据统计系统、等界面设计,使用规范标准能极大的减少设计时间。

3.【重复利用】相同单元属性,页面新建时可以执行此标准重复使用,减少无关信息,就是减少对主题信息传达干扰,利用阅读与信息传递。

未通过客户或上级领导确认产出的界面,请勿上传至蓝湖协作系统

设计师在原型步骤及应该想好对应的图层结构,交互特效,并和前端开发人员做好交流,是否可以实现,功能的评估一定要细致

1.已上传至蓝湖协作平台的高保真界面,应根据平台中的标注尺寸进行精确还原,Web界面还原度不得低于95%;移动端还原度为100%(精确到一像素)。

2.开发人员完成视觉部分内容以后,必须由UI设计师及前端技术负责人进行校对工作。

3.如遇到界面效果复杂或组件样式特殊等难以实现的问题,应及时与对应的UI设计师或前端技术负责人沟通处理,不能随意更换。

4.前端开发人员无权更改设计图中的样式及功能,遇到问题应及时与设计人员协商。

5.如遇产品经理或项目负责人未通过设计师确认,直接要求修改界面视觉效果部分,前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。

要制作一个优秀的后台原型,我认为主要就分为三个部分:

对于后台功能模块的结构和页面逻辑有清晰的认识

2.能够熟练的使用原型工具

3.优秀的设计风格和设计规范

1是基础,2是进阶,3则是让原型变得出色的点缀。

怎么样保证后台的功能结构和页面逻辑的清晰合理。

很多人画原型都有一个习惯,就是不管想没想好,直接就开始打开原型工具先拉几个框,或者就照一个自认为非常不错的网站后台开始照葫芦画瓢,这在我看来都是极其危险的。网页后台不同于一般的web界面,他对于功能模块的划分和页面的逻辑要求是非常高的。一方面网站后台的层次结构相比之下要复杂的多,另外一方面,网页后台的功能更偏向于对前端页面的管理,这就导致了功能之间的关联性和引导可能就要弱得多,这样的情况下,如果没有很好的理清后台的结构就开始画原型,那么最后做出来的后台管理系统很可能就是功能的堆积,功能易用性和操作的流程性都很难得到保障。

绘制后台原型时时刻谨记的:

画原型之前,先理清后台管理的功能模块,通过树状结构图来帮助自己划分页面和模块。

<img src="

"

data-rawwidth="1423" data-rawheight="676" class="origin_image zh-lightbox-thumb" width="1423" data-original="

">

理清模块之后,就可以着手设计后台管理系统的骨架,我个人分为三种:主模块(主要分为哪些独立的功能模块),次级分类(每个功能模块又有哪些次级的功能分类),功能事件(具体到每个功能页面内存在哪些主要的操作),大概的布局方式大概如下三种

1)顶部选项卡划分主模块,左侧边栏划分次级分类

<img src="

"

data-rawwidth="1116" data-rawheight="468" class="origin_image zh-lightbox-thumb" width="1116" data-original="

">

2)左侧边栏汉堡包样式的层级分类(偷懒~大概就是worktile的侧边栏样式)

3)左侧边栏二级分类列表浮出

<img src="

"

data-rawwidth="249" data-rawheight="155" class="content_image" width="249">

思考的路线应该是自上而下,在进行模块划分时不要拘泥于具体的某个界面的展现形式。

结构和逻辑的清晰(骨架)>功能页面的设计(具体到某个页面怎么设计)>优化性质的功能设计(是否需要预览,实时存储等功能)>用户体验

必要时, 可以牺牲用户初次使用的学习成本,初次使用的学习成本是可以为用户熟练掌握后的使用效率让步的,尽量遵循亲密/对比/重复/对齐的四原则。

对于重要但是不知道如何放置的功能,可以考虑放在顶栏的右侧,而不是放在主模块上

频繁的弹窗并不是好的选择(必要时该弹还是要弹的),如果可以的话,展开和右侧浮出半页都是不错的解决方式。