issue 18:产品包装

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

笔记部分

  1. 产品包装的意义

    1. 通过包装,更加全面完整地展示 APP,向潜在的用户介绍产品的主要功能、内容特色、设计理念等,让用户更多了解产品,进而下载使用产品;
    2. APP 包装也是展示设计师功底和专业性的机会,优秀的产品包装,能给人留下深刻美好的印象,甚至获得一些好的机会;
    3. 产品包装也是展示作品的方式,在面试过程中,优秀的产品包装,可以吸引面试官,同时使你的作品集为你加分,并有利于给面试官形成良好的第一-印象。
  2. 展示内容

    1. 应用简介-应用是做什么的,有什么特点,应用的设计理念,目标用户群体等等;
    2. APP 名称及 Logo-名称,名称来源,寓意,Logo 设计灵感,Logo 寓意等;
    3. 色彩搭配-应用色彩系统展示,用色规范等;
    4. 图标设计-图标展示,图标形象单独展示,图标规范等;
    5. 产品原型图或流程图展示部分视觉界面展示-启动页,引导页、首页、详情页、个人页等;
    6. APP 应用场景展示-对称排队展示、立体展示、手持设备展示、背景衬托展示等;
    7. 总结或者一句话的点评-表达感谢、展示自我、未来愿景等。
  3. 包装思路

    1. 头图-首先根据产品定位及风格设计一个能让别人感知 APP 的头图,产生良好的第一印象;
    2. 展示内容-确定要展示的内容,涉及哪些功能及产品特色,最好把展示的形式也构思确定:全图展示/展示局部/添加模板展示/页面截图展示/单个展示/多个展示.....
    3. 页面元素-添加文案、图片、图形、色彩等视觉元素,丰富展示画面;
    4. 版式布局-内容展示顺序,内容大小构图关系,页面整体布局视觉效果等;

思考

  1. ASO 是非常重要的,需要去研究一下
  2. 应用推广有套路,可以参考其他一些产品的推广的套路。

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. 我需要做的是新闻阅读类,因此要注意栏目的分配。

issue 16:版式设计原则

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

笔记

  1. 对比:对比的基本思想是差异化,如果两个元素互不相同,那就让他截然不同,要让页面引人注目,对比通常是最重要的一个因素,正是它能够引导读者的视觉走向。
    1.大小对比:通过大小突出重要信息
    2.虚实对比:通过虚实营造意境/突出元素
    3.颜色对比:通过颜色区分状态、突出视觉效果
    4.位置对比:通过位置远近分割模块
  2. 对齐:对齐原则是让版面中的元素有一种视觉上的联系,以此来打造一种秩序感,形成一定的视觉规范。
    1.对齐的作用是让页面统一,且有条理性
    2.应避免多种对齐方式混用
  3. 重复:设计的某些方面需要在整个作品中重复,重复的元素可以是某种字体、某个符号、某种颜色、某种格式;重复能增加设计的调理性,还可以增加统一性。

    1. 重复的目的是统一增强视觉效果
    2. 避免太多的重复同一个元素
  4. 亲密:亲密性原则就是将相关项组织在一起,在一个页面上,位置接近就意味着存在关联,因此相关项应当靠近,归组在一起。

    1. 如果多个项目之间存在很近的亲密,它们将成为一个视觉单元,而不是多个独立的元素,彼此相关的项应当归为一组
    2. 善于利用留白隔断毫无关联的元素
  5. 留白:留白也叫负空间,是指版面中的空白区域,留白不一定是白色,可以是其他任何颜色甚至包含微妙的纹理。留白赋予页面呼吸感,有助于引导视线,为设计建立层次,区分重点和关键点,吸引用户注意力,在简约风格和功能可用性之间达到平衡。

    1. 留白能够凸显特定的视觉元素
    2. 聚焦视觉重点突出信息本质
    3. 合理划分空间,预留舒适的阅读体验
    4. 提供准确的点击区域,有效预防误
    5. 触操作可以让设计更加简洁、友好
    6. 留白可以用在页面布局中各个元素之间,还可以用在特定 UI 元素的内部

思考

  1. 此部分建议通过看「给大家看的设计书」来完成学习。

issue 15 : 构图与版式设计

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

笔记部分

  1. 九宫格构图:九宫格构图主要用在分类为主的一级页面,起到功能分类的作用。九宫格构图
  2. 圆心点放射状构图:放射形的构图,有凸显位于中间内容或功能点的作用。在强调核心功能点的时候,可以试着将功能以圆形的范式排布到中间,以当前主要功能点为中心,将其他的按钮或内容放射编排起来。圆心点放射状构图
  3. 三角形构图:从上至下式的三角形构图,能把信息层级罗列得更为规整和明确。在界面中三角形构图大部分都是图在上,字在下,阅读更为舒服,有重点有描述。三角形构图
  4. 视线构图(F字形):使用 F 形构图能让图文搭配更有张力,更大气,产品信息更为简单和明确。F 形构图在 banner 中使用,能将标题更为突出,主题更加吸引视线。值得注意的是,要充分利用主图的画面的指向性。F构图
  5. 视线构图(S字形)界面中最基础的是 S 形视线构图S构图

思考

  1. 九宫格设计已经过时,目前大家追求更简单,更高效的操作。但是,在游戏中其实九宫格设计还是比较多。
  2. 个人主页三角形构图/圆心点放射构图
  3. 信息流 S 形构图

issue 14: 图标设计的要点

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

笔记部分

  1. 一致性强

    1. 细节构成一致:图标细节包含线条粗细、圆角大小、不透明度、倾斜角度、断线长度及接头样式(平头/圆头)、视觉大小等。视觉大小是指虽然实际大小不一致,但是视觉大小是一样的。同样尺寸的圆和矩形,矩形看起来会更大,所以要适当调小偏矩形的图标尺寸,使他们视觉大小一致。
    2. 元素一致:在图标中反复使用同一种元素能直观体现出他们一致性来,这样做的好处是能具有很强的辨识度,令人印象深刻,用户很快就能记住这些图标,加强了品牌建设。
  2. 易于拓展:功能图标有时甚至可以直接当作应用图标或者 logo 来使用,同时还可以通过点线面动效变化做下拉加载动画,这是单个图标的扩展。同时随着业务和功能的变化,在产品发展过程中很可能需要扩展图标库,这就要求我们在最初设计图标时应定义好视觉特征和延展规则,让图标易于在原有设计的基础上进行扩展,使得设计可延续。
  3. 图标尺寸:在移动端 iOS 规范中 2 倍图下最适合人点击的区域大小为 48*48 px, iOS 功能图标尺寸为 48 加或减 4 的倍数;安卓 android 功能图标尺寸为 48 加或减 8 的倍数。
  4. 图标网格图标网格 图标网格
  5. 形状构成:所有的图标都建议使用基础图形进行组合,运用布尔运算绘制,以保持图标整体的合理性,尽量不要使用钢笔工具勾勒(除非是细节点),钢笔绘制随心所欲不严谨,美感大打折扣。
  6. 图标细节

    1. 倾斜角度:设定一个角度规范值所有元素按倍数改变角度常用角度 15%、30%、45%、60”等会比较清晰。
    2. 像素对齐:图标的线条一定要紧贴像素网格,不然边缘会虚化模糊;形状描边对齐方式通常用内部对齐方式(不会改变图形尺寸),居中对齐会出现模糊,外部对齐会改变图标大小;

思考

  1. 短期来说,还是以用 iconFont 为主
© 2019 Powered by Typecho & Theme 豫ICP备15027577号