如何做APP界面设计

转载 2013年05月17日 18:01:14
  • 3213

航班管家创意设计总监向怡宁近日在一线下活动中分享移动应用界面设计的话题,很实用,在此与大家分享。

用户心态

用户在面对移动应用时,心态有三大特征:第一是微任务,我不会拿手机写一篇论,不会从头到尾看一部电影,使用是随时随地的;第二是查看周遭,也就是我所处的环境。我可能会打开手机,看有什么好的馆子,有什么好的电影,打折团购等等;第三个是无聊,很多移动用户更多情况是无聊的,打开手机,从左到右的翻,翻到最后再把手机关掉。

针对这三种特征的心态,我们怎么样去面对?第一,应用最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸;第二个要满足用户的情景需求;第三个要帮助用户去消磨时间。

屏幕布局

一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。

另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。

大家熟悉的,比如iOS的桌面,最主要的操作是在最下面,常用的四个钮,上面的内容可以来回滑动去选择。微信的操作也是在下面,重要的信息——我们的聊天内容放在上方。

一、简单

用户是要微任务的,心态是有点无聊的,我们要让APP变得简单。但设计更简单的体验,往往意味着要追求更极端的目标。因为你要充分理解用户的需求,理解用户现在想要什么,理解他现在的心态是什么,理解他的大情绪是什么。

1、隐藏或者干掉

不太重要,但是必要的东西,可以把它隐藏起来;无关紧要的东西,能干掉的就干掉,不要把什么东西都塞给用户。

比如邮件应用中,已发邮件、草稿、已删除这些功能,对一般用户来说,在最常用的场景里面,这些是不重要的,但是不可能把它去掉,就可以隐藏在下面。而签名、外出自动回复等,这些功能是更加不太使用的,可以把它藏得更深。

再比如Path,它把五个常用的按钮,集成到“+”里。点击加号以后,有拍照,音乐等功能。而界面上,打开这个应用,最直观的就是最主要的信息,没有其他的干扰。比如之前有多少人看过我的图片,它把这个信息直接集成在图片右上角,没有占据太多地方,点击之后,可以发表情、评论、直接删除等,做到了隐藏,是个非常干净、漂亮的页面。

2、分区

以酒店管家为例,酒店图片,酒店提供的服务设施,价格,这个是最主要的内容,放在首要位置;点评放在了其次;然后是交通状况,周边的设施等,有一个明确的分区。

用户一旦知道了这种分区方式,他下次再点开这个应用,想看哪个,他的眼睛会直接落在那儿。

3、帮用户决策

用户其实希望看到的是开发者直接给他们一个东西,非常简单,不用去记,不用去选择。那么怎样帮用户做决策呢?

以酒店产品为例,当用户需要订酒店时,很多应用都是需要用户输入条件,比如城市、日期、价格区间、房型等,之后得到酒店列表。快捷酒店管家中,用户打开应用,看到就是酒店页面,没有任何选择。这并不是简单粗暴,而是对用户研究之后提供的功能。

快捷酒店管家的核心用户,是本地化的,要在本地找一个快捷酒店,住一晚上。比如说我在通州住,公司在石景山,这两个地方有60公里,晚上加班加到12点,我是打车回通州,还是说直接就在当地找一个快捷酒店,住一晚上,第二天洗个澡再慢慢悠悠上班。我们要做的,先给用户定位,然后提供附近的快捷酒店。

二、爽快感和新奇感

刚才提到,用户很多时候是无聊的,我们的应用要能够让他感觉操作起来很舒服,让他经常使用,以干掉竞争对手;另外要让用户对应用产生好感,才有可能对应用评分,在微博分享。

1、视觉反馈

用户在操作应用的时候,要给他提供时时的视觉上的反馈。

快捷酒店管家中,选择了某个酒店某个房间后,可能会去选择日期。如果是订之后的日期,就有一个拖动的操作。从开始日期往后面拖,拖动的同时,会出现一个比较大的日期显示。为什么呢?

这并不是一个标准控件。之所以这么做,是因为这里的动作是拖动,不是点,拖的时候用户并不知道现在拖的是哪,所以需要一个提示。这个是视觉反馈,这种操作在一般的日历里头是看不到的。拖动本身是一种更好的交互方式,而明确的设置也让用户感到更舒服,很有意思。

2、隐喻

比如iOS6里面的Passbook,它的界面上就明显的用了隐喻。它本身算是一张数字化的贵宾卡或者说消费卡,界面做的也非常像一个消费券,这个界面非常精美,光泽、整个颜色的搭配等等都非常像真实的,而且就用了条形码。

大家对苹果的界面都感觉比Windows要好,就是因为苹果做的图标,界面都非常精美非常逼真,这也是苹果能够快速超越Windows的一个非常重要的地方。

3、操作方式的创新

比方说,我现在在这个位置,想知道某一些位置有什么好吃的,一种方式是定位了以后,直接就把附近所有东西显示出来。

还有一种方式,我的手在上面滑动,它会记录下轨迹,我只滑动这么一个区域,那就只会现显示这个区域内的商户。这种方式特别直观,而且用户想怎么样就怎么样,想画一个五角星就画一个五角星,想画一条线也可以,它只给你想要的地方的那些内容,这就是一种创新。

三、在设计中浸入情感

什么样的设计师,什么样的团队才算优秀?我们要对设计对应用浸入感情。它会给产品带来一些好玩、也可能让用户觉得有意思的地方。

比如定机票应用中,有头等舱和经济舱。经济舱是一个普通的人,而头等舱是一个戴着帽子,系着领结,胸前别着手帕的这么一个人,很酷的老板角色,体现出了头等舱和经济舱之间的区别。要做头等舱的人,一般都愿意自己看到自己这么一个形象。

再比如微信4.0,刚打开的时候有一张图片,非常文艺非常在都市的感觉的一张图片,配文字“如你所见,微信,是一个生活方式”。其实它在干嘛呢?它是在提示用户,新增了自己相册功能。它虽然是给用户介绍新功能,但是它把整个情绪融在里面。

如何做APP界面设计相关推荐

  1. 航班管家向怡宁:如何做APP界面设计

    转自:http://cn.technode.com/post/2012-08-27/40038247302 航班管家创意设计总监向怡宁近日在一线下活动中分享移动应用界面设计的话题,很实用,在此与大家分 ...

  2. 最实用的APP界面设计知识,有温度的APP设计(转)

    在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...

  3. android 距离右边距,APP界面设计中间距与边距的要点

    原标题:APP界面设计中间距与边距的要点 广州UI设计别样设计表示,无论是做网页设计.后台系统设计.还是APP界面设计,都要遵守一定的设计规范,俗话说的好,无规矩不成方圆,在无需创新的情况下遵守设计规 ...

  4. 如何进行APP界面设计

    如何进行APP界面设计 用户界面是人机交互过程中媒介的图形化表达,界面设计是指对人机交互方式.界面美观.操作逻辑的整体设计,出色的界面设计会给用户带来绝佳的视觉体验和互动操作感受. 1.精简界面 注意 ...

  5. APP界面设计必备,常用字体规范

    好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事. 这几天有人问我说:"最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗--" ...

  6. 灵感专题—2019年优秀APP界面设计作品赏析#5月

    App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时 ...

  7. android ui头像圆角化,APP界面设计当中,为什么喜欢把头像设计成圆形

    看到这样的标题,你是不是也很惊奇呢?仔细的去回想一下,好像很多APP界面设计当中的头像都是圆形的.很少见到头像是方形的.菱形或者四边形的. 这是为什么呢? 难道是因为好看吗? 今天25学堂的小编跟大家 ...

  8. 动态交互app界面设计原理指南

    动态交互对数字产品的用户体验产生了深远的影响,但是,如果界面元素没有表现出基本的动态交互设计原理,则可用性会受到损害.在用户界面的上下文中,动作不仅仅是视觉装饰.它是一种强大的力量,可增强产品参与度并 ...

  9. UI设计案例|文件管理App界面设计灵感

    资源管理器绝对是我们使用电脑时最高频打开的几个界面之一. 文件管理 App 可以帮助我们管理自己的文件,分类管理,快速查找. 集设网www.ijishe.com设计师交流社区精选 12 组文件管理 A ...

最新文章

  1. LeetCode Letter Combinations of a Phone Number 电话号码组合
  2. 数据结构源码笔记(C语言):集合的位向量表示
  3. 786. 第 K 个最小的素数分数
  4. centos php 默认安装目录,centos系统中的软件安装目录在哪
  5. 为开发者准备的9个实用PHP代码片段(转)
  6. ssms 连接 ssis_在SSMS中手动设置SSIS包加密
  7. [Ubuntu] 查看内核和版本号
  8. useradd和adduser的区别
  9. Server.MapPath() 探究
  10. 二叉树的简单应用--表达式树
  11. jsBarCode生成条码并且打印的问题
  12. Vue input 限制只能输入正整数、数字、英文、两个小数
  13. WEB-互补色与对比色的计算与获取 (实用、赞)
  14. [A001]兄弟连3天学会php
  15. OpenLayers 3 之 添加地图网格
  16. Chrome浏览器背景颜色设置为豆沙绿保护色详细教程!
  17. 深度解读CDN高防防御机制,看它如何为服务器保驾护航?
  18. matlab求马尔可夫转移矩阵,matlab – 估计马尔可夫转移矩阵的置信区间
  19. obs多推流地址_还在为拿不到推流地址而烦恼吗?三分钟让你用上OBS进行高清直播...
  20. google 地图 API 参考 .

热门文章

  1. Nutch的插件机制
  2. Linux操作系统CentOS7连接XShell[详细版]
  3. 一个新的项目:狼人杀(六)
  4. 超简易实现电脑微信多开
  5. MySQL数据库启用安全审计功能
  6. html5 简单的弹弹球制作
  7. 关于Typora的卡顿
  8. 分享:前端页面样式收集 电影购票选座
  9. Windows:Windows 8安装64位Benq G900HD的显示器驱动
  10. 实事求是对大学生的意义