RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
你可能遇到了下面的问题
关闭右侧工具栏

首页 > 新闻资讯 > > 案例精选丨助眠app的UI界面设计过程

案例精选丨助眠app的UI界面设计过程
  • 作者:小海豚
  • 发表时间:2018:04:25 18:00
  • 来源:未知

富贵心水论坛 www.wis09.cn

UI设计的主要方法包括时尚和娱乐视觉风格的结合,考虑到APP面向的目标用户,设计师再决定使用明亮或深暗的的色彩创建UI组件以及渐变效果。


比如目标是年轻女性的话,粉色是个好选择。用于CTA按钮和一些其他UI组件的中心颜色设为粉红色,粉色与与美丽,敏感和年轻女性气质密切相关。


现在,我们发现健康类APP越来越多了:健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等,这些APP的确对我们保持日常健康提供了帮助。而随着生活节奏的加快,生活压力的加大,失眠似乎已经成为司空见惯的事情了。


有需求就会有市场。健康类APP中的“助眠APP”成为了失眠人士的“救星”。其UI设计界面常用蓝色、灰色、黑色作为主色调。此外,为了让整个用户界面看起来温和愉悦,设计师经常使用白色背景将平衡带入视觉构图。

沈阳网站建设

(潮汐助眠APP灰蓝色调设计页面)


UI界面设计过程



(1)通过调研,了解用户群的基本情况(包括年龄、性别、心理情况、文化程度、个性、种族、社会背景等),在对用户了解的基础上建立用户模型。同时,有时设计人员还要了解软件的功能模式以及采用的软件交互方式等。 


(2)在软件功能??楹陀没枨笕范ǖ幕∩?,提出软件界面的初步模型。初步模型要能反映出软件的风格、界面布置、安装过程等能反映出软件的风格、界面布置、安装过程等。 


(3)软件界面设计必须考虑系统响应时间、用户求助机制、错误信息处理和命令方式四个方面。 


(4)界面设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置。

 

网站制作


(5)软件界面设计的评价 :对于软件界面设计的评价,由于软件类型的多样化,目前还没有通用的评价体系。一般来说,评价可以从以下几个主要方面进行考虑:


a、用户对软件界面的满意程度。

b、软件界面的标准化程度。

c、软件界面的适应性和协调性。

d、软件界面的应用条件。

e、软件界面的性能价格比。


UI界面设计的过程大致就是如此。

现在,我们发现健康类APP越来越多了:健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等,这些APP的确对我们保持日常健康提供了帮助。今天我们就来分享一款健身APP——Slumber的UI 设计案例。该项目由UI / UX设计师Ernest Asanov主导。

APP开发



项目


一款助眠APP的UI 设计



目标


Slumber是为有睡眠问题的人设计的,里面包含故事和冥想的内容。通过这些内容,Slumber希望能够让用户放松,从而睡个好觉。界面设计的主要任务是:

1、清晰直观的导航,用户使用这个APP主要是为了放松,而不是花几个小时获取信息;

2、时尚的视觉图形,为产品营造适当的氛围;

3、高可读性和引人入胜的动画,以支持轻松的交互。

整个APP非常简洁,一共有三个Tab,分别是首页、睡眠库、我的,下面分别来看一下具体的设计思路。



首页


至于颜色和背景的选择,移动用户的界面是根据APP的功能来设计的。Slumber采用的是深色调,传递灯光柔和的夜晚氛围。屏幕上还有一些相应的图形,整体看起来时尚、深沉。

APP开发

首页上有新剧集和热门播放列表,标签栏将用户链接到APP的核心功能区域:主页、睡眠库和我的。鉴于Slumber的目标用户群体十分广泛,一些用户可能不太熟悉技术,因此设计师采用了标签+图标的方式,以便为每个人提供清晰的导航。

沈阳APP开发公司


屏幕上另一个漂亮而引人注目的点是自定义插图,它与预加载器一起制作成动画,使得等待的过程不但不乏味,还充满了美的吸引力。



睡眠库


睡眠库中有大量轻松的内容可供选择。为了能够让用户快速的进行略读,每个选项都配了相应的主题图片。

手机软件开发


简单明了的过滤器系统使得用户可以选择最舒适的设置和声音组合,以完善冥想或睡眠的体验。用户可以自己调整背景效果,创建个性化的声音。在用户调整和聆听音乐的过程中,背景图片一直存在,不会消失,整个体验很完整。

APP开发公司

Slumber上的动画并不引人注目,但是在过渡的过程中为界面添加了风格和自然外观。选择的字体可读性很高,排版层次结构非常清晰,用户可以在短时间内浏览屏幕。

640.gif

睡眠库中的配图质量都非常高,不但让用户在视觉上看起来非常舒服,也创造了很好的使用氛围。

千翼科技



我的


“我的”类目下面有用户所有的关键性信息,用户可以自己设置就寝时间提醒,获取睡眠耳机。定价屏幕显示用户如何达到高级模式。在这个??槔?,UI设计也是采用的深色背景和鲜艳的图案,容易吸引用户的注意力。

这个项目是一个有趣的挑战,在整个设计过程中,既要考虑与“健康睡眠这个主题的对应性,也要注意视觉元素的时尚型,要在二者之间取得平衡。

10.jpg




优秀的UI设计




好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。


与之相应,UI设计师的职能大体包括三方面:一是图形设计,软件产品的产品"外形"设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的"测试",其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。


上一篇: 教育APP开发的解决方案

下一篇: 网站开发之前,你必须打的“预防针”

标签:案例展示

  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-03-04
  • 大运河文化带非遗大展已接待5.6万人次观众 2019-03-03
  • 乌鲁木齐一老人西湖边落水 5位小伙出手相救 2019-02-28
  • 兰州大雨!消防出动疏散被困群众  一名孕妇被救出 2019-02-16
  • 房价炒成这个样子,还不准说,像话么? 2019-01-25
  • 一周河北省政府副秘书长吴立芳被查山西孝义市委书记落马 2019-01-25
  • 尼斯湖里有啥?新西兰学者欲探测“水怪DNA”揭秘 2019-01-15
  • 5G标准出炉明年有望商用 2019-01-15
  • “特金会”曲折筹备历程回顾 曾两次反转 2018-12-08
  • 【中国文化】补课:端午节不能互祝“快乐” 2018-12-08
  • 天津高新区7000张“创通票” 为企业节省成本超亿元 2018-12-08
  • 傅明先当选济宁人大常委会主任 石光亮当选济宁市长 2018-12-08
  • 安神-热门标签-华商生活 2018-11-30
  • 还加上制裁伊朗引起价格飙升的石油战 2018-11-30
  • 呼和浩特市全面停止大青山脉矿山勘查开发建设活动 2018-11-28
  • 923| 130| 141| 259| 533| 347| 212| 574| 661| 544|