设计原则之高级精致
品质感不仅仅适用于品牌范畴,也适用于Web生态中的具体页面,用户对内容和服务做出直观判断往往是通过页面设计细节的好坏,因此好的内容与服务依赖优质的设计。高级精致原则也可以应用在需要用户集中关注单个元素信息时使用,避免大量通用一致信息下找不到重点。
设计案例01:简洁的页面也可以看起来高端精致,注意细节处理,如图标、logo、图片的精心选择和修整。
设计案例02:注意边距适配,精心选用图片,以及多张图片的组合搭配。注意图片的比例和构图。
设计案例03:注意图片的质量和清晰度,我们建议图片资源保持图片尺寸至少达到2X屏幕密度下的像素尺寸。同时考虑加载性能,不要直接上传拍照原图,对图片适当进行压缩。
设计案例之智能快捷
为用户提供智能、自然和及时的信息及交互反馈,流畅的动效、多感官的体验有助于用户理解信息及场景,这也是面向未来设计的基本特征之一。
控件元素不仅只是静态展现和交互,也可以赋予活力,每一个元素具有变体,变色,缩放,发光,发声等智能特征,利用动效引导功能交互流程,可以让传统的Web更具活力和亲和力。
移动端受制于用户使用场景及屏幕尺寸,用户输入等操作不及鼠标精准,在设计上充分考虑操作上的便捷,优化操作流程,根据场景和用户适配相关的内容与引导,给用户及时清晰的反馈,让体验更加智能便捷。
设计案例01:由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计页面时因尽量减少用户输入,对用户输入场景进行引导和智能匹配。
设计案例02:减少用户的操作步骤,智能判断用户的意图,协助用户简化选择提升效率,让复杂的功能体验更加顺畅便捷。
设计案例03:根据用户的使用地点,时间,设备等信息动态推送展现相关内容,例如地图在上下班高峰时段自动展现上下班路况信息、天气信息等。
设计案例04:微动效可以表达功能状态,可以让界面更具吸引力,更加有趣。提供及时的动效反馈(音频,视觉提示等指示功能系统),并让用户了解信息状态;例如下面案例svg图形的动效,形体根据状态需要变换形体,打破静态页面内容的乏味,让页面看起来更加生动智能。
设计案例05:控件元素不仅有静态展现,也可以赋予活力,元素具有动态属性,例如变体,变色,缩放,发光,发声等智能特征,智能快捷的理念可以让传统的Web更具活力和亲和力,利用动效引导功能交互流程。
来源: https://juejin.im/entry/5a1d419e6fb9a044fe461bf8