服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

掌握这四个设计原则,正确建立B端设计规范

日期: 来源:Clip设计夹收集编辑:DownByTheRiver

关注▲Clip设计夹后台回复“进群”加入设计成长群

 设计夹的第135篇文章分享 

Halo,这里是设计夹,今天为大家分享的是「B端设计。B端设计离不开设计规范这个话题,而做好设计规范是一个庞大复杂工程,很多人对这些处于一知半解状态。
在这个系列文章里通过结合平时的项目案例来谈谈自己对B端设计规范的一些理解,希望可以带来一些启发。

本篇先谈谈设计规范制作的指导思想--设计原则,后续文章再展开讲一下常见各种组件的设计规范。
  设计规范作用
设计规范作为B端设计中非常重要的一环,它的作用主要体现在以下三个方面:

在日常工作中,当项目组收到一个新的需求时,如果已经具备了成熟的设计规范体系,其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。
以下是具体工作流程:
  设计原则
通过前面内容我们知道了设计规范对于产品设计意义重大,那么制定设计规范制定依据又是什么呢?
这里就要引出设计原则这个话题,设计原则是设计规范的总纲领,所有的设计规范都应当以设计原则为基准。
设计原则主要包含以下内容:

接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。
(一) 清晰
清晰原则主要从视觉角度让界面信息传达合理,提高用户信息获取效率。主要包含对比,亲密,对齐,重复四个方面。
1.对比
对比是指界面中为了区分信息层级,强化元素对比度,使用的很常见的一种手段。
例如,下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮;通过对文字字号加大,字体加粗,颜色加深来与弱文案形成对比,凸显关键文字信息。

2.亲密
如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,距离就应该越远,也越像多个视觉单元。
亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

3.对齐
在界面设计中,将元素进行对齐,既符合了用户的认知特点(我们往往倾向使知觉对象的直线延续还是直线,曲线延续还是曲线),也能引导用户视觉流,让用户更流畅地接收信息。

4.重复
重复是指相同的元素在项目中重复引用,作用是可以有效降低用户的学习成本,同时提高这些元素之间的关联性。

(二) 高效
高效原则体现在便捷、轻量、简化、一致几个方面,目的是通过合理的方式让产品操作更加便捷;交互体验与内容更加轻量和简化;以及产品风格保持一致。
下面结合常见案例说明如何应用这一原则。
1.合理利用拖拽--便捷、轻量
在涉及到诸如上传文件,排序,滑动输入,搭建等需求时,合理采用拖拽交互往往可以打造更加便捷用户体验。

2.尽量减少不必要的跳转--便捷、轻量
用户操作过程尽量减少跳转,以实现交互减步长,从而使用户操作更高效轻量。
例如能用原位操作就不考虑展开收起;能用展开收起就不用气泡...依次类推(优先级从高到低:原位>展开收起>气泡>弹窗>抽屉>新页面)

3.放大点击热区--便捷
放大可点击按钮热区,相对于较小点击热区,具备更丝滑操作体验。

4.悬停即现--轻量
利用悬停即现,避免信息过于重复啰嗦,简化页面提高阅读体验。

5.折叠次要功能--简化
页面功能按钮过多时,可将次要按钮收纳到一起,点击时再展开,外面只展示高频操作或重要按钮,保证页面内容简洁。

6.统一样式--一致
一致性是指在不同页面中相同操作应保持一致视觉与交互样式,可有降低用户学习成本与企业开发成本。
(三) 友好
友好原则应贯穿用户操作前,操作中及操作后三个阶段,给予用户及时反馈与帮助。
1.操作前
在用户操作前给到合适的引导与帮助,有效减少用户迷茫感。

2.操作中
通过交互效果及页面样式让用户可以清晰感知到自己当前操作。

3.操作后
利用界面中元素变化清晰直观展示当前的状态。
(四) 可控
可控主要体现在自由和导航两个方面。
1.自由
自由即指用户可以自由完成一些操作,例如回退,撤销,终止等。

2.导航
导航是指用户随时知晓当前所在位置,而且可以利用导航随意到达目标页面。
最后

通过本篇内容我们大概知道了制作设计规范主要方向,那么具体到每个组件上,我们该如何去设计呢?

后续篇章将细分聊聊如何去设计「B端常见组件」,记得及时关注文章推送哦~

另外推荐大家去DownByTheRiver主页查看更多内容:

zcool.com.cn/article/ZMTQ5MTIwNA==.html
慢慢来比较快,如觉得有帮助,

请点个赞&在看,谢谢!

添加微信, 邀你进设计成长群⭐️


Tips: 这里会持续更新设计干货,包括作品集设计、设计规范、答疑解惑…感兴趣可以扫码加入,一起成长!⬇️

相关阅读

  • 我还在打字,别急着报错呀!

  • 你有没有遇到过那种,才输入一个字就开始报错的文本框?看似很基础的问题,却又随处可见,我认为是因为设计师缺乏对前端的理解造成的。因为我也是接触了几年的前端后,才对很多相关的
  • 蔚来2023年1月交付新车8,506台

  • 1月,蔚来交付新车8,506台,其中第二代技术平台ET7、ES7和ET5三款车型交付量占当月总交付数的85.6%。截至目前,蔚来新车已累计交付298,062台。2月5日元宵节,蔚来将在各地牛屋开展
  • EL7在欧洲持续交付,听听欧洲用户怎么说?

  • 继EL7在荷兰开启欧洲之旅后,挪威、德国、瑞典的EL7也于近期陆续交付首批用户。他们因何与蔚来相识?欧洲用户选购高端电动SUV时看重哪些功能点?EL7给新用户留下怎样的第一印象?让
  • 自动续费前5日应以显著方式提醒!工信部明确

  • 据工业和信息化部官网消息,为优化服务供给,改善用户体验,维护良好的信息消费环境,促进行业高质量发展,工业和信息化部近日印发通知,部署进一步提升移动互联网应用服务能力。围绕提
  • 休想再“自动”扣我钱!

  • ,近日,工业和信息化部印发通知,对移动互联网应用服务提出要求。比如,对手机APP中存在的默认勾选、强制捆绑、“摇一摇”等诱导操作,频繁弹窗、自动续订、申请非必要权限等事项,进
  • Java 缺失的特性:操作符重载

  • 阿里妹导读本文介绍了什么是操作符重载、为什么需要操作符重载、如何在Java中实现操作符重载以及一些建议。什么是操作符重载操作符重载,就是把已经定义的、有一定功能的操作
  • 最新通知!这些事情不可以

  • 为优化服务供给,改善用户体验,维护良好的信息消费环境,促进行业高质量发展,工业和信息化部近日印发通知,部署进一步提升移动互联网应用服务能力。1.确保知情同意安装。向用户推荐
  • 26个实用的UI/UX设计技巧,一定不能错过!

  • 关注▲Clip设计夹后台回复“进群”加入设计成长群 设计夹的第132篇文章分享 Halo,这里是设计夹,今天为大家分享的是「设计技巧」。本篇将从头像、按钮、卡片排版、文字排版4个

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • @聊城人,这笔钱多退少补,明天开始!

  • 注意!2022综合所得年度汇算将于明天(3月1日)开始↓↓↓2022年度汇算的时间为2023年3月1日至6月30日,届时个税将再次进行“多退少补”。纳税人如需在3月1日至3月20日之间办理年度
  • 掌握这四个设计原则,正确建立B端设计规范

  • 关注▲Clip设计夹后台回复“进群”加入设计成长群 设计夹的第135篇文章分享 Halo,这里是设计夹,今天为大家分享的是「B端设计」。B端设计离不开设计规范这个话题,而做好设计规
  • 得意山水间

  • 癸卯年初,有一位老先生故去。他既是知名邮票设计家,还在艺术领域涉猎广泛,我们非常熟悉的中国邮政标志、中国电信标志、中国集邮有限公司标志均出自他手——邵柏林。邵老还与摄
  • 我国集成电路人才培养“痛点”与对策

  • 原文刊载于《中国科学院院刊》2023年第2期“政策与管理研究”,原文标题《高水平科技自立自强下我国集成电路人才培养“痛点”与对策》。本文为精简改编版管开轩1 余 江2,3*
  • 我们最近又买了 6 个好用的东西

  • 编注:我们希望通过「编辑部的新玩意」介绍编辑部成员们最近在用的新奇产品,让他们自己来谈谈这些新玩意的使用体验究竟如何。《新玩意》栏目如含有商务内容,将会在对应条目标注