设计与交互
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实时搜索：减少用户操作，自动智能，服务器请求压力大
  • 搜索按钮触发搜索：适用于搜索内容量少，且不频繁的需求

他山之石

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

大家共享。

配色类

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

设计类

素材类

参考作品

时尚

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

动效