零信全平台应用设计
Challenge & Goal
简化交互,更新视觉
这次设计改版基于以下早期的问题:
1. 功能多且杂乱,技术向过于明显。即使是 B 端产品,复杂的功能也应尽可能局限于管理员,而不是暴露给所有使用人群;
2. 交互紊乱。初版设计在功能形式上参照 slack 较多,之后又进行了功能的叠加,导致产品臃肿,交互上令人迷惑;
3. 视觉元素没有标志性,配色生硬。前期由于快速开发,设计上美观性的优先级较低,多用原生图标和控件。产品功能稳定之后,需要对产品设计进行规整和润色;
2. 交互紊乱。初版设计在功能形式上参照 slack 较多,之后又进行了功能的叠加,导致产品臃肿,交互上令人迷惑;
3. 视觉元素没有标志性,配色生硬。前期由于快速开发,设计上美观性的优先级较低,多用原生图标和控件。产品功能稳定之后,需要对产品设计进行规整和润色;
因此我的目标是重构交互和更新视觉系统,并在不同平台的客户端设计改版中延续这一点。
Info Architecture
信息架构
设计前期,我用思维导图针对现有产品的功能进行思路整理,并使用它和团队沟通协作,再根据沟通的结果将应用架构简化表达。
Sketching & Prototype
手稿及原型
在将信息架构转换为具体的交互原型之前,我习惯用最基础的工具——纸笔,来表示基础的交互流程。团队根据手稿进行比较具体的讨论,并且可以在手稿上直接修改,这比在设计软件上进行讨论更加高效,更快地得到反馈。
之后再将手稿转化为 sketch 内的交互原型,进一步讨论,得到最终的原型方案。
Visual Hierarchy
视觉层级
针对不同的平台确立不同的视觉层级。在桌面端将大部分功能界面放在最底层,优先级低或使用频次低的功能放在 Popup 菜单, 最后将设置或警告功能置于 Modal 中。由于移动端中很少出现 Popup,将桌面端中的 Popup 功能置于最底层。
Visual Display
视觉展示
Reflection
反思和复盘
交互在很重要,尤其是在可用性较强的应用中。前期 Web App 有做过交互稿,但是不够仔细,导致后期在开发的时候出现很多遗漏,而此时再补设计稿很难和之前的框架自洽。
另外讨论设计问题一定要设立设计标准,大家的目标都是一样的,但是往往会认为在这个具体问题上这个因素优先于另一个因素,因而产生争执。设立设计标准的目的是为了明确设计因素的优先级,有章可循。
Thanks.