Material Design 风格的交易主页面设计

简约至上


➢ 明确认识

你的用户体验应该简单到不受这些干扰(在家里、在公司、在户外)的影响,能够在人们被打断的间隙生存。

为什么应该忽略专家型用户?
专家并不是典型用户,他们的判断会出现偏差。他们不会体验到主流用户遇到的问题。专家想要的功能往往会吓倒主流用户。

想吸引大众必须要关注主流。

简单就是感觉在掌控一切。

➢ 删除

简化设计最明显的方式就是删除不必要的功能。

如果一个小的变化导致复杂的流程,就应该退一步去寻找更好的解决方案。

➢ 组织

组织往往是简化设计的最快捷方式。

用户会提出的第一个问题是:“我可以用它来做什么呢?”因此,着手组织之前首要要理解用户的行为:他们想做什么,先做什么后做什么。

画出用户的行为有助于理解如何组织你的软件产品。

利用不可见的网格来对齐界面元素,是吸引用户注意力的一种有效方式。用户虽然看不见网格,但视觉加上想象会告诉他们“接下来请看这里”,根本用不着明亮的颜色或动态图片。网格越是简单,效果就越明显。

➢ 转移

只在主页面保留基本功能按钮,将其它控制转移到下一级菜单中,你可以多分几级,切勿全部摆在前面。从而将最主要的展现在用户面前

 

 

最后附上一本《简约至上:交互式设计四策略》:下载

‘交易页面’设计——从21:9宽屏幕到375px屏宽的响应样式·

金融类“交易页面”为整个网站用户访问时间最久的页面,所以做到网页端响应到所有屏幕,是一件蛮重要的事情 😉

下面展示从超宽屏幕到iphone7设备的设计效果图。


 

1.苹果手机显示样式1024px 以下屏幕显示(375 x 667 设计稿):

 2. ipad / 常用12寸显示器 1024~1440之间显示(1024 x 798 设计稿):

3. 主流15寸显示器  屏宽:1440px~1920之间显示(1440 x 900 设计稿):

4. 主流27寸、24寸的显示器  屏幕宽度:1920 ~2560 之间显示(1920 x 1080 设计稿):

5. 宽屏幕显示器 屏幕宽度:2560 px 以上的显示器(2560 x 1080 设计稿)这类显示器基本为游戏重度玩家: