美文网首页
5步搞定页面布局

5步搞定页面布局

作者: LydiaY | 来源:发表于2020-03-06 22:36 被阅读0次


一. 确定页面的任务目的

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

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

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

好用: 友好和充满情感化

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

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

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

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

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

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

案例:

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

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

二. 信息元素的组织分类

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

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

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

案例:

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

三. 对组块进行排版布局

设计原则:

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

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

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

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

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

弱化:弱化次要流程

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

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

删除:删除不必要的功能

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

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

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

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

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

情感化设计

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

动效

体验的一部分

案例:

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

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

安卓和ios不同的设计

五. 页面排版的设计验证

可用性测试

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

J1 为了借鉴而借鉴

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

J3 为了用户习惯而设计

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

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

1.邀请可用性评估专家

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

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

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

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

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

粗暴的用户测试:

1.不拘泥于形式的原则

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

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

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

相关文章

  • RN(react native)入坑指南-08,如何加载远程数据

    前言 通过前面的一系列联系现在页面布局技巧已经掌握,页面跳转已经搞定,页面之间的参数传递也已经搞定,我们的代码也进...

  • 5步搞定页面布局

    Content:  step 1:确定页面的任务目的 step 2:信息元素的组织分类 step 3:对组块进行排...

  • 5步搞定页面布局

    一. 确定页面的任务目的 衡量页面的标准:满足用户需求 减少用户的理解和操作成本 还能深深 的吸引用户 让这个产品...

  • 2018-11-25

    昨天一天在家,看了部电影《毒液》,写了几行代码。最后依然没有搞定小程序的页面布局问题。

  • CoordinatorLayout嵌套CoordinatorLa

    页面布局:一级页面布局: 二级页面布局(即在一级页面ViewPager中的Fragment下): 这样布局的目的是...

  • Swift.轮转动画+Pop框架

    前言: 项目改自Swift.轮转动画,100行代码搞定,页面布局没有变化,只是改变了动画效果,以及动画实现方式.所...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • Android自定义底部导航栏-Tabbar

    一、添加依赖 二、开始写布局 1、Tabbar布局页面 2、fragment_test.xml布局页面 这个页面就...

  • 左右条栏目 分层MVP RecyclerView

    页面的布局 主页面布局 左面的RecyclerView的布局 android:layout_width="matc...

  • Android----从相册选取图片

    导入包名 相册布局 相册条目布局 图片页面 图片条目布局 相册页面代码 图片页面代码 辅助类 MyImageSho...

网友评论

      本文标题:5步搞定页面布局

      本文链接:https://www.haomeiwen.com/subject/ynmorhtx.html