设计与交互
13 September 2018

在给内部员工做后台系统经常面临缺产品,无UI。。。如何从无到有的搭建一个高大上的网站成了必须拥有的能力。

更多的一点体会是,多人合作的一个项目,在初期就应该定好一些规则,除了代码规范,设计规范也是很重要的方面,譬如配色和某种交互形式。否则每个人都选择自己的那套方式,拼凑出来的产品必定操作是不连贯的,风格是不统一的。

原则

对于交互设计必须有个大原则在心中,遵循原则去实践

易用 > 美观

多加的动效和交互要考虑是否直观,是否能让用户自行感知到功能点。多余的交互步骤不能是为了酷炫。

保持克制: 能做,但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨,并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说:完美不在于无以复加,而在于无可删减,万事莫不如此。

面向对象的方法: 探索设计规律,并将其抽象成『对象』,增强界面设计的灵活性和可维护性,同时也减少『设计者』的主观干扰,从而降低系统的不确定性。例如:色值换算、间距排版。

模块化设计: 将复杂或者重复出现的局部封装成模块,提供有限接口与其他模块互动,最终全面减少系统的复杂度,进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板,节约无谓的设计且保持系统一致性,让『设计者』把创造力专注在最需要的地方。

在各种交互场景中,也有一些比较推荐的做法:

对齐

https://ant.design/docs/spec/alignment-cn

表单项

如果列表项很长,视觉容易串行,hover上后可以改变当前行背景色来强调

强调

重点提示性文字,颜色高亮强调,容易忽略的重要操作,按钮高亮

删除

危险的删除操作要加confirm提示

提示message

  • 成功且有明显交互的,无需提示,譬如表单类目减少一项
  • 错误必须提示,后端返回语句如果做不到精确,自己需要在润色文案提示出原因
  • 请求耗时的操作加loading提示进行中
  • 如果是在成功前要阻止其他操作的请求,可考虑整个页面loading

弹窗

少用

  • 非主流程的辅助性信息填写
  • 主页面信息拥挤情景,靠弹窗获得信息空间

popover

  • 大多数人能明白,但少数人需要提示的图标类信息
  • hover了解详情类

相同或者类似的操作保持相同的交互

降低使用学习成本

鼠标图标

  • 可点击的元素
  • 可拖拽的元素
  • 可选中的元素

批量

列表类的操作,要能支持批量,譬如批量删除,来提升体验

直接了当

https://ant.design/docs/spec/direct-cn

提前确定

主题色

  • 主色调、辅色
  • light\dark
  • 输入框hover、focus变成主题色
  • 浅色按钮hover后加深色值,深色按钮hover降浅色值
  • 色块区域,border颜色加深一度

字体大小

  • 普通文案
  • 加大版标题
  • 缩小版提示语

主题相关内容应变量保存,来应对后续修改

交互统一

有些交互会存在多种形式,每种各有适用场景,没有最佳实践,但是同一个系统中推荐统一体验

加载更多

  • 滚动加载:更多的用于手机端,适用于浏览多页可能性大的场景。优势是无感知无多余操作自动加载,劣势是会导致页面不断堆积dom元素,量大时需要动态移除来提升性能。
  • 分页标签:适用于对后面的页面浏览需求不大的场景。可以方便的指定页码跳转,也没有性能负担
  • 加载更多按钮
  • 前几页使用滚动加载,浏览可能性小的后几页使用分页

按钮点击后请求未成功时的状态

  • loading
  • disabled: 不可点击 可结合使用

卡片操作按钮

  • 右上角图标:适用于操作场景频繁,与浏览需求同等地位,更直观。
  • 浮层出现按钮:适用于主需求是浏览主题信息,操作需求场景少于浏览需求

表单验证

  • blur或者change时实时验证
  • 统一保存时验证 最好2样都做,防止浏览器自动填充时不触发blur和change事件的校验

搜索

  • 500ms实时搜索:减少用户操作,自动智能,服务器请求压力大
  • 搜索按钮触发搜索:适用于搜索内容量少,且不频繁的需求

他山之石

多逛好的设计素材类网站,有助于我们学习借鉴,快速造起美观的网站~

大家共享。

配色类

始终觉得配色是我最大的障碍。。。

设计类

素材类

参考作品

时尚

各大奢饰品品牌官网,看下来都是黑白色调,简约大方

动效