issue 17:App 设计

发表于 2018-09-09   |   分类于 设计课程

笔记部分

  1. App 页面类型

    1. 启动页:启动 APP 时所呈现的第一个界面,是为了缓解用户等待应用加载数据内容的漫长时间而设计的转移用户注意力,为加载争取时间的页面;
    2. 引导页:用户首次打开应用时出现的,用来介绍产品功能、亮点或引导用户完成某种操作的界面;
    3. 主页:APP 主要功能页面,通常将应用自动进入的第一个功能页面叫做首页,首页相对其他功能页往往包含更多的功能入口和视觉重点;
    4. 注册登录页面:采集用户信息及用户身份验证的页面,有些应用将注册登录页合并到一起不做区分处理,注册即登录;有些应用会先让用户注册,之后根据注册信息再次登录应用;
    5. 个人页面:主要针对有用户数据的应用,展示用户信息,也可在个人页个性化设置应用;
    6. 菜单导航页:聚集应用功能入口的页面;
    7. 图片展示页:展示图片内容的页面;
    8. 列表页面:以列表形式展示 APP 内容的页面;
    9. 评论页:用户参与互动进行评论及展示所有评论内容的页面;
    10. 搜索页:用户查找目标内容进行搜索或内容分类的页面;
    11. 详情页:相关内容的详细展现页面;
    12. 反馈页:用户操作结果告知页面;
    13. 设置页:针对功能或应用进行设置的页面;
    14. 数据报表页:数据分析及展示相关的页面;
    15. 关于:应用版本信息、帮助反馈、评分等内容页面。
  2. 启动页
    1.目的

    1. 在应用启动过程中,通过减少用户等待焦虑度,使应用体验更加顺畅
    2. 传递信息(商业信息、产品的核心作用)、故事或是产品的人文情怀
      2.样式
    3. 官方推荐:“设计一个与应用的首页几乎相同的启动页,避免在启动屏幕上包含文字和广告”
    4. 纯 Logo 型:这种直接放产品 logo,背景提取产品 logo 主色调或用纯白色正负形展示,属于纯 logo 型,是最简单直接的推广方式。
    5. Logo + 宣传语: logo+宣传语的启动页在很多 APP 中被布局在界面底部,主要是因为产品为了盈利会和别的企业商业合作,在第二页放置其他企业的广告页或者宣传页,在底部布局可以保证前后框架统一,过渡自然流畅,同时也方便了工程师工作。
    6. Logo 拓展式:单纯放 logo+宣传语的页面依然会留有大量的空白内容,可以针对产品提取 logo 元素添加细节或场景,重新刻画出新的图形去表现产品功能、产品特点,同时画面空白也得到填充。
    7. 意境图片式:以符合产品功能特点的图片作为启动页,能够像电影经典桥段一样给用户留下深刻印象。
    8. 产品相关式:选择与产品相关的图片,可以非常直观告诉用户产品的功能和内容。因此电商类产品启动页多用与产品相关的图片或元素制作启动图。
    9. 插画式:除照片外还可以通过插画表达产品的特色或渲染节日气氛,而且插画通常具有很强的视觉表现力,能快速拉进用户距离,产生情感共鸣。
  3. 引导页

    1. 作用和目的

      1. 从产品的角度出发,产品需要通过用户引导来突出产品的新功能和特性,说明功能结构变化,避免产品的陌生感,满足产品的需求。
      2. 从用户的角度出发,用户需要通过用户引导了解产品的功能以及如何操作,迅速上手产品,降低学习成本,满足用户的需求。
        2.类型
      3. 功能介绍类:功能介绍类引导页主要是对产品的主要功能进行展示,让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面的方式来展现。
      4. 使用说明类:使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识,以手绘风格为主。
      5. 推广类:推广类引导页除了有一些产品功能的介绍外,更多是想传达产品的态度,让用户更明白这个产品的情怀,并考虑与整个产品风格、公司形象相一致。
      6. 问题解决类:问题解决类通过描述在实际生活中会遇到的问题,直击痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。
    2. 表现形式表现形式
  4. 注册登录页

    1. 不需要登录:对于不需要用户信息就能使用所有功能的产品,可以直接跳过登录。
    2. 第三方账户注册登录:国内常用的 QQ、微信;国外常用 Google、FaceBook、Twitter。现在国内大多数 APP 基本都支持第三方账号登录,简化用户注册登录的流程,提高 APP 的留存率。
    3. 邮箱注册:最开始的时候注册登录是基于 PC 的,也就是基于网页。所以邮箱注册自然而然成为主流,而且注册过程中需要验证邮箱也很方便,用户直接在 PC 就可以完成所有操作。
    4. 手机注册:随着手机号码的实名制全球通业务的普及,使得手机号码具有了唯标示性。并且 APP 是基于手机的应用软件,所以用手机号码注册登录 APP,通过短信的方式验证,逐渐成为了主流。
  5. 注册登录页的交互细节

    1. 自动弹出对应输入框:手机号输入、验证码输入时自动弹出九宫格数字键盘;邮箱输入、密码输入时自动弹出英文全键盘。
    2. 用显示/隐藏图标代替输入两遍密码:解決方式是在密码输入框最右边增加一个显示隐藏图标,让用户在输入完一遍密码后可以选择点开显示/隐藏图标确保密码输入无误,减少用户重复性操作。
    3. 长数字分组显示:不只注册登录页的手机号其他页面如银行卡、身份证等较长数字显示时,以 3 或 4 为单位将其分组显示有利于用户阅读和再编辑。
    4. 错误反馈及快速清除:当用户输入的数据有问题时,要及时反馈,而不是让用户自己去猜测哪里错了。另外在用户输入时如果发现输入有误,输入框后面的清除图标能快速清空输入数据,不用连续一个个删掉。
  6. 注册登录页面设计要点

    1. 亲密:通过元素间距离的远近将相似元素分为一组。
    2. 对齐:通过将元素对齐,规范元素排版。
    3. 简约:注册登录页面的背景要尽量简约以突出主体信息。
    4. 对比:将重要的信息放大、增加色块背景;将相对次要的信息缩小、降低明度等,使信息层级更清晰。
    5. 均衡:注册登录页面通常是沿着中心线左右对称,将信息左右均衡摆放,防止页面不平衡。
  7. 缺省页

    1. 是什么:页面没有数据或者网络状况不好、中断等操作异常状态下 APP 提供给用户的反馈提示页面。
    2. 目的和作用:提醒用户,安抚情绪;通过缺省页引导用户下一步操作行为,营造良好用户体验。
    3. 场景

      1. 首次操作-用户刚开始使用 APP,一些数据或内容页面显示为空,这个时候可以通过缺省页引导用户去操作;
      2. 主动触发-用户操作而触发的缺省,“清除数据”类似的情况发生时可以挽留用户并指引相关操作;“操作内容为空”时需要安抚用户的失落感,可以鼓励用户或表现幽默;
      3. 错误页面-操作或网络以及其他原因导致的页面错误,需要告知用户出错的原因并引导用户去解决相关问题。
    4. 设计原则

      1. 告知:告知用户页面的状态、操作结果的状态、为什么为空等
      2. 引导:引导用户使用功能的介绍、解决方法
      3. 情感:与用户互动,通过文字或图案赋予产品一定的情感或情怀取悦或鼓励用户。
    5. 表现形式缺省页
  8. 加载页面

    1. 状态栏加载:系统自带,无需设计。
    2. 导航栏设计:在导航栏标题前面加上加载小菊花图标旋转或者将导航栏标题临时变成加载信息的文字提醒,当进入应用或收取信息时标题栏展示正在加载,加载成功则标题栏 loading 消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。
    3. 下拉加载:下拉刷新被大多数应用采用,它即可以使本地内容可见,也允许用户主动下拉刷新页面内容,加载的样式也可以做出进一步的设计。
    4. 上拉加载:上拉加载也是比较常用的加载样式,当用户想查看新的数据时,通过上拉界面自动加载出新数据的过程为上拉加载。上拉加载的设计样式越简单越好,因为用户在看当前界面内容时,下面未显示的部分内容已加载完毕,加载过程很快消失,所以不必设计过于复杂的样式。
    5. 进度条加载:如果加载过程用时比较长,就需要用进度条加载样式来告知用户需要等待的时间进度,让用户有一定的心理预期。进度条加载多用于浏览器,包括 PC 端和移动端浏览器。APP 中的页面如果有 H5 形式的,多数也会采用进度条进行加载。
    6. Toast 加载:当用户执行某个操作时,为了防止用户继续操作导致数据加载失败,则用 Toast 的样式来提示正在加载,同时在这段期间内用户的操作将受到限制,一般只能执行返回上一级的操作,其他都被禁用。Toast 加载一般用于关键性场景中,防止用户进行多余的操作。
    7. 预设图片加载:加载时为了不让页面布局太空,会先用 L OGO 或者预设图片来填补所加载内容的位置,同时加深用户对品牌的认知。
    8. 色块加载:同样大小的色块加载要比图片快很多,所以在图片加载的过程中,将未加载出来的内容区域用灰色的色块填充,在加载过程中有很好的连贯性。运用色块加载,需要内容框架是固定的。
    9. 设计风格

      1. 简洁-构成元素形式简单、操作效率优先、目的明确单一
      2. 趣味场景化-故事叙述性强、场景比较完善、相对丰富、品牌传递完整
      3. 互动性-有一定的互动性,通过用户操作与产品进行互动

思考部分

  1. 不同的 App 的功能、布局、色彩、易用性各不同,根据产品的类型来设计具体的形态。
  2. 我需要做的是新闻阅读类,因此要注意栏目的分配。

发表新评论

© 2019 Powered by Typecho & Theme 豫ICP备15027577号