【修真院PM小课堂】web/app中的设计规范



undefined_腾讯视频

为什么要做设计规范

统一性:相同的元素以不同形式展示,对于用户来说容易造成困惑,新的变化会让用户思考。统一的规则能减轻用户的思考负担,同样的文字,状态,按钮,都应该触发相同的事情

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

提升能力:由于组件控件的可复用,这直接使设计师的工作效率得到极大提高节省了大量时间,可以有大量时间思考设计和业务背后的逻辑从而提高设计思维能力。在规范形成过程中,设计师需要对单个元素场景,状态认真思量,大概率发现平时工作难以察觉的问题,进行优化

保持品牌形象和认知度:没有设计规范,迭代过程中容易忘记设计初衷,产品控件混乱,品牌形象走样遵循相应的规范,保持产品特性,强化用户认知度。

web中有哪些设计规范

标志的使用:首页徽标和二级标志:颜色,大小,字体,样式.

栅格系统:以规则的网格阵列来指导和规范版面布局以及信息分布,包括横幅图分布,视频播放器位置,广告位排布,列表排布,主要内容等

颜色配色:网络中,要有一个主色调,作为网络中主要部件配色贯穿于网站结构中,其他辅色可按照部件的功能和位置划分

文字:文字的大小,样式和配色,按照内容和页面层级不同,应有统一规格。可以很清楚的看到,页面中标题,时间,内容等,采用不同的文字大小划分层级。

图片,图标:图片高宽比,大小按不同层级有固定模式,功能相同的图标规格统一。

各部件和交互样式:包括​​板块样式,选项卡,导航,步骤条,搜索,按钮,提示,弹窗,浮层,表单,下拉菜单,输入框等,应尽量做到统一和复用

页头页脚:首页,子页面,内容页相同层级的页面,页头页脚一般保持统一

app中有哪些设计规范

间距:以统一的间距管理,区分页面控件和信息层级。

颜色:应用程序中有主色保持软件风格和用户辨识度,作为主要部件配色贯穿于软件结构中,其他辅色可按照部件的功能和位置划分.ofo是给我印象比较深的,各个页面都是黄色为主色,有很高的用户辨识度。

文字:应用程序中字体一般不超过两种,其他特殊的字体少量,可以特别说明字号以使用量多的为基准,定义为中字号,再根据信息,页面层级划分出大字号,小字号。

各部件和交互:导航栏,标签栏,工具栏,输入框,列表,图标,下拉刷新,下拉加载,反馈提示等,应尽量做到统一和复用。对比下今日头条的两个标签页,采用相同的刷新操作,同时刷新的提示也相同,新闻列表也使用相同部件。