移动APP设计

一、设计流程

  产品经理:需求,上传下达

  用研部:软件的用户体验、人群分类、市场调研、同类竞争

  交互设计部:画交互原型图

    ①预留位置,引领设计师进行设计

    ②注清页面的层级与连接关系

    ③展示页面的基本样貌,以供审核及修改

  视觉组:平面、网页、界面、视频

  前端工程师

  后台工程师

  app:适应点与盈利点

二、图标设计

  1、图标分类

    剪影图标(单行图标):只有形状

    扁平化图标:形状和颜色

    拟物化图标:形状、颜色和质感

    2D、3D图标:

      2D:扁平化但是没有投影

      3D:相对于拟物化图标有更加真实的细节,更加精致的质感

  2、设计流程

    图形搭建:比例

    颜色填充:同一色系

    材质添加

  3、图层样式:投影

    样式添加:

      单面有效果:影

      双面有效果:斜面和浮雕

      四周有效果:光

    浮嵌效果:

      内嵌:内阴影+投影  上暗下亮

      外浮:内阴影+投影  上亮下暗

  4、图标统一性问题

    造型:规则形状、不规则形状

    风格:剪影、扁平化、拟物化

    颜色:

      自然颜色:事物本来的颜色

      情感色:自然中无法用符号代替的有个人情感的(受众、企业文化、个人理解)

    样式:全局光,一般为90°;个别光

三、界面设计

  1、界面设计方法

    ①如果顶部条有质感:顶部和底部相同;如果顶部条为白色:底部条为白色/灰色,图标为线性图标,点击高亮后为色块图标;如果顶部条不是白色,则底部条为白色/浅灰色

    ②字体

    ③内部的图片展示(参考值)

      1:2  一般首页通栏

      4:3  正文的图片展示

      斐波拉契:1:1:2:3:5:8:13:......≈0.618  (黄金分割比)

      16:9 / 16:10  人体视觉比例

  2、板式

    空间要透气、元件之间距离要统一、布局要统一

  3、界面设计流行

    SCS:唯一色调  simple color schemes

    CS:卡片式  cards(瀑布流)

    CF:内容唯一  content first

    CD:圆形设计  circle design

  4、交互形式

    ①列表式结构  底部条菜单

    ②侧滑分栏  个性APP(简单)

    ③瀑布流  内容单一,信息量大

    ④旋转木马  内容较少,设计感强

    ⑤九宫格  内容区分明显

  5、颜色搭配

    底色:70~80%

    主色:15~20%

    强调色:5%

    辅助色:5%

四、APP分析

  新闻APP:

    看新闻

    看视频

    看图片

    个人功能:分享、评论、收藏、订阅、天气、空气质量

    软件功能:黑夜模式、字体大小、离线下载、清除缓存

  社交APP:

    loading页:logo(反映软件的定位)

    颜色:蓝色

    软件的功能(适应性、盈利性):

      适应性:

        社交(聊天)、交友:加为好友、删除功能、聊天/历史记录、个人设置

        加为好友:账号查找、附近的人(开定位)、高级搜索、扫二维码、摇一摇、通讯录

        删除功能:删除痕迹、黑名单

        聊天/历史记录:查找历史记录、删除记录

        个人设置:头像、个签、相册、姓名、性别、爱好(筛选机制)

      盈利性:

        针对软件的功能定位

        虚拟的阶段:互赠虚拟礼物、排行榜、虚拟商城、互动游戏(对比性,软件粘性、增加互动、盈利的延展)

        实体阶段:形象的包装、形象的推荐

猜你喜欢

转载自www.cnblogs.com/zhouwanqiu/p/8919166.html