商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

如何构建Web端设计规范

发表日期:2018-01-14 19:50聚圣源浏览次数: 本文关键词:如何,构建,Web,端,设计,规范,这篇,文章,是,

  这篇文章是之后WEB端系列设计规范的前言部分,目的是起到抛砖引玉的作用,简述如何制作属于“自己”的Web端设计规范。Web端设计规范系列也是我个人梳理学习总结构建的过程,同时分享出来给大家做参考学习。

  

如何构建Web端设计规范

 

  Web端设计规范的价值

  1. 可复用性

  有了完整的设计规范和对应的组件控件。方便视觉和交互设计师反复复用,不需要重复制作,减少工作量提高工作效率。

  2. 统一性

  有了统一的设计规范,设计师之间使用时,可避免自我创造组件控件,保持团队产品的统一性体验

  3. 提升能力

  由于组件控件的可复用,这直接使设计师的工作效率得到极大提高节省了大量时间,可以有大量时间思考设计和业务背后的逻辑从而提高设计思维能力。同时完整的设计规范是系统的,设计师阅读之后可以构建自我的设计体系,对于设计的提高有极大的好处。

  4. 团队文化沉淀

  团队有了设计规范之后,便于团队以后做设计的依据和参考,不论是新员工的到来还是老员工的离去,都可以很好的对接工作提升团队的协同效率。

  Web端设计规范包含哪些

  目前网上大部分设计规范都是之针对组件控件的规范,缺少完整的设计思想和体系化的内容。

  在制定设计规范过程中会形成设计理念、设计原则、组件控件、界面交互和输出文档等。设计者可以依据自我的设计理念和原则按照功能需求直接调用规范中的标准控件,按照信息结构调用元素尺寸进行设计,很轻易便能输出中高保真原型图,减轻了设计过程中对交互控件选择和信息排版思考的负担。

  

如何构建Web端设计规范

 

  Web端设计规范之设计理念篇

  不同的使用对象(B端、C端),不同的终端设备,设计的区别是完全不一样的。所以设计理念也有所区别。

  B端产品一般较定制化,以业务为导向。可能有很多高级功能,突出高效易用,导致易学性打折扣。

  C端产品一般考虑绝大部分用户使用场景和诉求,高级功能会相对少点。突出易学性。

  所以在制定设计理念时,可根据团队实际情况来设计制定。

  Web端设计规范之设计原则篇

  设计原则目前已经有很多,例如尼尔森的十大可用性原则、格式塔原则、剃刀法则、费茨定律、以及设计中常见的对比、对齐等,那么对于这么多原则如何变成一套自己的设计规范的设计原则篇呢?这个需要设计师们根据自身情况或者自身团队实际情况去把控梳理。

  Web端设计规范之组件控件篇

  组件控件是整个设计规范的最重要的内容之一,组件控件分类可以根据组件控件属性进行分类,也可以根据组件控件的功能进行划分。

  按照设计师做设计的使用场景,还是按照组件控件的功能性进行划分比较切合。

  依据于功能划分,例如表单类就可以划分为:单文本输入,多文本输入、日历时间选择器、下拉选择列表、单选多选等等

  Web端设计规范之界面交互篇

  移动端的触发手势有单击、长按、左右滑动、拖拽、旋转、夹捏等。相对于移动端,Web端的界面交互就很简单了,基本就是悬浮和点击。

  界面交互的本质用一个公式可表述即:触发对象+操作行为+交互结果=界面交互

  Web端设计规范之团队输出物篇

  作为一名交互设计师,我们的重点工作职责是起到承上启下的作用。

  比如对接上游的产品经理和项目经理,跟他们讨论过产品规划及需求后,他们会根据交互设计师输出的交互文档来评审设计方案是否满足用户需求,以及在开发实施过程中的可行性;

  其次要对接下游的视觉设计师和开发工程师,他们会根据交互文档中的线框图、交互细节说明等来输出视觉设计稿、用代码实现交互设计方案,并以此为依据完成落地实现等工作。所以交互设计师最重要的输出物就是交互文档,它是对接上下游的重要纽带。

  专业的交互文档应该包含以下7点内容:完整的项目简介、需求分析、新增修改纪录、信息架构、交互设计的方案阐述、页面交互流程图(包含界面布局,操作手势,反馈效果,元素的规则定义)、异常页面和异常情况的说明。

  作为视觉设计师而言,输出物的是视觉稿、标注和切图,这里不做赘述。

  #专栏作家#

  UX,微信公众号:UEDC,人人都是产品经理专栏作家。前华为ITUX交互组组长,现美团点评高级交互设计师。

  本文原创发布。未经许可,禁止转载

  题图来自 unsplash

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9841.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:1895

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-09-20 浏览次数:1883

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1808

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1338

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:940

相关文章

【夏邑做网站】如何安装米拓建...

米拓建站系统是一款 高端、快速、开源 的建站系统,模板风格仅仅是网站的外表,模板背后所使用的系统后台才是网站真正的核心,了解米拓系统的功能。 一、获取米拓建站系统安装包 米拓...

日期:2018-09-12 浏览次数:70

【山西网络推广】新手和企业如...

小程序创业扶持计划 实现月入10万创业梦 每个企业都需要有一个自己的网站,很多老板觉得建站很难,其实建站并没有那么难,今天就教大家如何一步步搭建自己的网站。 第一步:确...

日期:2018-09-09 浏览次数:124

【宁夏SEO】电子商务网站建设如...

小程序创业扶持计划 实现月入10万创业梦 全国各地的人们都在经营电商,有的在大型电商平台上经营,有的自主搭建电商平台。我是一位使用数商云电商系统的商家,选择搭建独立的电...

日期:2018-09-06 浏览次数:74

【江苏网站建设】创业公司如何...

小程序创业扶持计划 实现月入10万创业梦 对于互联网创业者而言,如何更好的营销,让自身产品被用户所知,提高知名度成为了企业的当务之急。 网络营销广告的精确定位性,对于传...

日期:2018-09-05 浏览次数:74

【重庆网站制作】传统企业如何...

随着互联网的发展,传统企业的官网建站需求也在不断的增加,因为企业官网就是在互联网中展示自己的一个渠道,可以更好的宣传我们的产品与企业形象,有利于客户对我们更多的了...

日期:2018-08-31 浏览次数:74

随机推荐

对于企业网站建设来说 哪些内容...

网站建设搜索框设计技巧和功能...

初期草根站长适合做什么样的网...

利用robots文件做seo优化,让蜘蛛...

网站建设如何突破同质化竞争的...

企业建站:打造炫酷官网的几个...