经验观点 2018年02月27日
0 收藏 148 点赞 4,635 浏览 1749 个字
摘要 :

UI设计——不仅仅是创造漂亮的图像。 面临的挑战 我为自己提供了一个绝佳的机会来训练我的视觉设计技巧,并通过创建一个移动app用户界面库来学习其设计过程。UI库也称为可……

UI设计——不仅仅是创造漂亮的图像。

面临的挑战

我为自己提供了一个绝佳的机会来训练我的视觉设计技巧,并通过创建一个移动app用户界面库来学习其设计过程。UI库也称为可视样式或主题,是一种自定义的图形界面元素包,应用于特定的应用程序或网站,为用户创造高雅的体验。

我的设计过程:

须知:APP的UI设计流程

有一点需要注意的是,这个项目是关注UI /视觉设计,而不包括用户体验设计; 例如用户研究,可比评论,用户行程映射,信息架构等。

 

App概念

问题定义

通过我的新应用程序可为用户解决他们在寻找课程和研讨会中所遇到的困难。对于像我这种想要学习新东西的人来说,找到合适自己的课程还是很有难度的。

 

价值主张

一般来说,一个价值命题以陈述的形式出现,通常是第一个呈现在大众面前的句子。它的主要目的是传达客户期望从产品中得到的好处。

这类似于电梯推销的场景——当你把你的app概念提炼成一个易于记忆、引人注目和可重复的短语时,便可在“用户体验战略”一书中体会到JamieLevy的价值主张公式。

这是个为客户提供服务的平台。

介绍下BetterMe ——“Yelp的课程和研讨会。”

这是一个帮助多伦多伙伴以方便快捷的方式查找课程和研讨会的APP

 

用户角色

须知:APP的UI设计流程

须知:APP的UI设计流程

 

线框

在我对用户目标和行为有了更好的理解后,我列出了这款app的一些关键功能,以创建低保真线框。

  • 课程列表(按流行度,附近,即将推出,为你推荐)
  • 搜索(按类别,类型,价格范围,地点,评分等)
  • 即时消息(查询)
  • 用户资料(游戏化,学习列表)

须知:APP的UI设计流程

以上是草图

 

须知:APP的UI设计流程

部分完成度的线框

 

可视化语言

语言由不同类型的单词组成,却可以组合起来创建一条消息,视觉语言也与任何其他语言一样,其可以分为风格,距离感,应景度和趋势。

我采访了一些用户并了解他们的需求,发现了app呈现出给人的情绪引导,从而进一步定义视觉语言。

面试问题:

  • 你为什么要使用这个app?
  • 什么样的情绪会使得这些需求得到满足?
  • 你如何通过视觉语言来传达这种情绪?

设计初始工作表

须知:APP的UI设计流程

情绪板

作为设计师,我们的目标是优化和加速进程。 Atomic Design的想法是允许用户体验设计师,UI设计师和前端开发人员并行工作而不是瀑布式的方式工作。

我们如何设计一些视觉上的东西,在更早的阶段呈现给用户?

情绪板是设计过程中视觉可交付成果之一。这是一个拼贴画,通常由图像,文本和物品组成,除了描述了页面的实际布局以外,还有我们通过产品获得的感受。

我创建了两个独特的情绪板来呈现针对不同用户群体的感受。一种是安静,干净,简洁的,适合学习和研究的目的; 然而第二种则是令人兴奋的,年轻,快节奏的,传达着激情和积极的情绪。

须知:APP的UI设计流程

情绪板(左 – V1;右 – V2)

然而,对很多人来说,情绪板可能太抽象了,因为要设计一个情绪板如何表现为有形的视觉设计元素是很困难的。

 

瓷砖式风格设计

瓷砖式风格是有形的视觉设计元素拼贴,如调色板,字体或按钮样式,这有助于通过具体的视觉语言与参与者交流沟通。它弥合了情绪板和线框之间的空白,在早期获得设计反馈是非常有用。

须知:APP的UI设计流程

须知:APP的UI设计流程

瓷砖式风格可以帮助人们想象如何将各个元素融合在一起。我采访了15位朋友,让其选择自己喜欢的风格。结果,2/3的人更喜欢第一种视觉风格。以下是他们的回答:

“我喜欢第一个,因为在视觉上很有吸引力,我会花更多的时间去发现和研究这款app。”

“第一种简约,我喜欢图标胜过图片。”

“第二种风格更令人兴奋,但这对于课程列表应用来说,有点过了。”

 

用户界面和原型

“如果一张图片值1000字,那么一个原型就值1000次会议。”—— 在IDEO上的专家如是说。

在决定使用视觉风格之后,我将其应用于中保真度的线框,并进行了一些设计迭代。 然后,我创建了具有以下高保真用户界面的交互式InVision原型:

须知:APP的UI设计流程

 

UI——主页面

须知:APP的UI设计流程

GIF

须知:APP的UI设计流程

 

风格指南

风格指南是一套建立和强化风格以提高沟通的标准。它统一设计标准,并对团队协作力有着显著影响。

须知:APP的UI设计流程

 

深思

“风格来来去去。 好的设计是一种语言,而不是一种风格。”——MassimoVignelli

这个项目是由red书院的UI设计基金会提供的兼职项目。我花了两个周末的时间来试验和探索各种UI设计方法,以把我的应用——从概念到实际原型做得更好。

 

封面作者:Rifayet Uday

原文地址:Mockplus

作者:Linda

 

转载请注明:极致设计 » 须知:APP的UI设计流程

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/106163.html

相关推荐
精选
互动投影的应用所表现出的四大特点
互动投影是集合了商业价值与娱乐特质的人机交互形式,其因绚丽的展示效果而深受到大众喜爱,它的实现主要依靠捕捉设备对目标影像进行实时的动作捕捉,…
日期:2022-06-26 点赞:196 阅读:2,751
精品
提高UI界面高级感的排版实用技巧
UI 界面中,排版设计同样重要。如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。 这就是…
日期:2022-06-26 点赞:178 阅读:3,985
最新
汽车二手车租车小程序定制开源源码开发制作模板的UI功能设计
汽车二手车租车小程序APP定制开源源码开发制作模板需要哪些功能?——龙兵科技 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐…
日期:2022-06-26 点赞:160 阅读:3,856
最新
房产报备新房二手房租房等小程序源码制作UI功能如何设计功能?
 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐全网络销售公司该如何推销出去一个产品?是不是要针对客户的需求去讲解…
日期:2022-06-26 点赞:282 阅读:1,601
必看
机器人情感化设计
前段时间接到了一个企鹅岛的机器人项目,项目目标是要传递“机器人友好”的概念。那我们要如何从设计的角度去传递这个概念呢?友好其实是人对事物的一…
日期:2022-06-26 点赞:90 阅读:4,772
推荐
企业展厅设计用多媒体的方式实现有何帮助
  企业展厅是企业对外宣传的一种重要形式,其通过数字沙盘、弧幕影院、多点触控、全息投影等多媒体互动技术,让用户更好地参与其中,给用户带来沉浸…
日期:2022-06-26 点赞:280 阅读:4,668
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站