Page 99 - 打通产品与用户需求

第三章 视觉交互设计

则会失去很多用户。通过满足用户的需求，也是推动网站发展的最好方式，加强
电商网站页面界面视觉推广可以最快最直接地带给用户真实的应用体验。通过优
化页面视觉，用户可以在第一时间感觉到自身体验的改善，对于当前的电商网站

而言，页面视觉交互设计的创新仍处于学习借鉴阶段。电商网站的兴趣和用户需
求之间的平衡发展还有着较大的提升空间，相信电商网站视觉交互设计在不久的
将来会更具吸引力。

第三节 界面视觉交互设计

一、基于表现层的界面视觉交互设计

表现层是通过视觉效果的完成带给用户的感知体验层。此层通常需要优秀的
视觉设计，动效设计构成良好的用户体验（UE/UX）共同完成。表现层为抓住用
户的第一焦点而展开设计，其中包括视觉元素中的 ICON、色彩、Image、字体、
按钮等的信息层级的排序，及这些元素所带来的交互体验。

（一）表现层—视觉设计
1.ICON
视觉包含点击的启动 ICON 的 Logo 设计，方寸之间需要让用户快速通过图
形识别到产品，分为文字图形作为 ICON Logo，如支付宝、美团；或者英文的首

字母或者前两个字母，如 Keep、Behance；以吉祥物作为启动图标的图形，如京
东、QQ；还有以意联想图形的方法作为视觉元素，如百度网盘、网易云音乐。
主图标的大小有规范，如单个出现在手机界面的大小，编入组之后在文件夹中的
大小，在 APP Store 中列表里面的大小以及点击查看 APP 详情页里的大小，同时

还有下载 APP 后手机提示消息中通知叠放或通知列表里的图标大小等。以图标
工场为例，上传一份 1024×1024px 尺寸的图标，格式支持 JPG、PNG、PSD 文
件，生成所有应用图标在手机中的各个尺寸，将文件集成到 Xcode 可以直接编译。
进入界面后也有不同大小的图标，如金刚区的图标，底部引领一级横向逻辑主页

的所有图标，以及设置里的图标，和如返回、更多、搜索类的系统图标。图标
有不同的风格扁平化、MBE、拟物化、毛玻璃、Big sur 3D，新拟态……以优酷
APP-V9.0 全新升级的图标为例，结合了毛玻璃风格和 3D 风格图标。新拟态风格
则如 LEMO FM 的图标。

91