5步搞定页面布局

一. 确定页面的任务目的

衡量页面的标准:满足用户需求 减少用户的理解和操作成本 还能深深 的吸引用户 让这个产品捕获用户的芳心

有用: 最重要的衡量标准 用户和产品需求的满足

易用: 架构清晰 流程清晰 不需要思考

好用: 友好和充满情感化

用户到达每个产品页面的目的: 获取信息+操作流程=完成"任务"

阅读类产品:为了营造沉浸式 的阅读体验,在阅读时,隐藏操作按钮.但需要操作时,仅需要清除屏幕即可唤起按钮

音乐类:为了沉浸式体验,享受音乐的乐趣,通过黑胶唱片的形式,展示音乐播放主题.按照设计规范和手指活动范围,将必要操作展示在唱片下侧.

列表类:为了突出建群操作,广场以悬浮入口的形式 建群页面,合理的处理了建群和加群的需求

支付类:半遮罩设计,减少页面跳转,营造一种都是当前页面的体验,提供用户付款率

总结:明确当前页面用户的任务和目的,以及产品的需求.

案例:

用户的任务和目的:1.查看心仪的产品详情:价格 规格 然后进行购买;2.查看用户评价,帮助做出判断.3.先收藏稍后购买

产品需求:1.用户购买转化率,进入页面就能进行购买;2.将商品信息分享给其他人.

二. 信息元素的组织分类

面对众多需求功能,我们如何进行也你按设计呢?

卡片分类法:可能是信息组织分类最好的方法:信息架构 导航设计 页面排版设计

卡片分类逻辑:现实生活的映射.

案例:

如何将需求转换为功能:罗列出功能和需求

三. 对组块进行排版布局

设计原则:

整体原则:清晰的视觉引导 -

1. '用户的固有阅读习惯[眼动追踪 F型 如从左到右的书面阅读习惯]

2. 对角线法则:左上角到右下角的视觉引导

显示:严谨的页面逻辑关系,突出主要任务流程

格式塔里面关于逻辑关系的应用:点线面

弱化:弱化次要流程

一些功能优先级较低,不需要用户第一时间能区分出来,减少认知压力

除了视觉上的区分外,也可通过增加操作步骤,来有意增加某些任务难度[个人觉得体验相当不好]

删除:删除不必要的功能

关系到用户日常使用体验的功能,以及那些能消除他们挫折感的功能是必要功能. 查看明文密码是必要功能.二次密码确认就..

隐藏:不能删除的非必要信息

如运费计算方式/高阶功能:复杂的条件搜索

影响因素:操作频率/距离与面积

拇指操作区域/费茨定律:用户使用指点设备到达一个目标的时间相同与以下因素有关,距离和目标大小.该定律也有悖论:当面积增大不会带来可用性的持续增长;距离太近可能引发分组不轻 界面混乱 容错率低等问题.

情感化设计

好用:情感化的提现/人性化

动效

体验的一部分

案例:

设计策略:帮用户快速获取信息/..

四. 权衡平台规范和用户的使用习惯

安卓和ios不同的设计

五. 页面排版的设计验证

可用性测试

关于借鉴与设计的三个阶段:

J1 为了借鉴而借鉴

J2 为了避免借鉴 而差异化设计

J3 为了用户习惯而设计

等不及标准用户测试 线上用户反馈和数据表现, 那快速验证的方法:

.专家评估是一种专家评审法,由几个评价者根据通用的可用性原则和经验来发现系统潜在的可用性问题.

1.邀请可用性评估专家

2.每一个评估人员进行1-2小时的使用系统

3.以可用性启发为基础,让评估人员对用户界面进行系统的检查,找出存在的可用性问题

4.之后提供一份独立的报告名字报告中英包括可用性问题的描述,问题的严重性以及改进的建议

5.构建一个对系统的评价并尝试找出解决方案

邀请交互专家->系统评估->需求交互&可用性问题->整理结果->修改及排期

粗暴的用户测试:

1.不拘泥于形式的原则

2.有针对性抓取同事进行测试

3.可以任务走查,也可是AB测试

4.获取测试结果后快速优化