UI设计:如何让APP变快!

转自:http://www.eoe.cn/news/17568.html

@亚茹有李 :​做了设计转眼间也4年多了,从2011年由网页设计师转到手机APP设计师;最近的工作不是很忙,就静下心来去阅读学习下互联网的一些发展趋势来弥补自己在这方面的不足(因为工作的时间大部份都是做设计);之前一直以为用户体验方面的工作是有专门的研究人员去做的,与设计人员没有关系,通过这几天的学习,发现做设计的也可以做到用户体验啊,下面我就给大家一一介绍下,大家互相学习 ^_^

一、后台的执行

核心思想:通过在状态栏运行加载的程序的同时,可以使用户可以做其他的事情

举例说明:

Instagram

当点击“赞”的按钮后,按钮的字样立马就变成了“已赞”的状态;其实看图中的红色框的加载图标,它只是在后台运行默默的加载程序;这样做的好处就是让用户不需要一秒钟的等待,避免了当网络不好的时候那个圈一直在转的情况。


发微博平台

例如:我刚发表了一条评论,右边红色框的区域立马显示在评论列表,但实际上我回复的这句评论,对方不能立即收到消息提醒;是因为在看状态栏的​,我发的那句话正在后台程序默默的加载运行呢;这样后台执行它的任务,我可以继续查看其他的评论内容,也不耽误事。

二、在载入前显示内容

核心思想:让用户感觉很快想看到相关产品的信息

举例说明:


Appstore详情页

当用户从列表进入详情页的时候,最上面也就是左边图红色框的区域,毫无加载状态,立马有产品的信息显示,让人感觉点击后内容立马就出来了。

三、充分利用好缓存

核心思想:利用缓存机制,提高页面的打开速度

举例说明:


蝉游记的“游记”和陌陌的“添加微博好友”等页面,都利用了缓存

缓存可以把网络数据保存在本地,下次打开时无需要再次向网络请求,减少流量并减少等待时间。在设计时,可以先显示缓存内容,同时后台到网络上拉取新内容,若有新内容立即换或下次访问时替换。

四、界面先行,网络随后

核心思想:对于一些数据量很小,且失败可能性较小的网络交互,或者是在没有网络的情况下,用户也能够顺畅地使用APP

举例说明:


微信朋友圈的“发图片”和微博的“收藏”功能

朋友圈即使在没有网络的情况下,也可以发布图片,等有了网络之后自动上传刚发布的内容,这一点体验做的很棒(PS:希望微信可以快点更新ios7扁平化)

微博的收藏,当不想收藏的时候,再次点击,帮你可以做其他的事情了,此时会在状态栏自己努力加载。

五、预测用户行为,提前开始任务

核心思想:预测用户下一步操作是什么,提前为用户铺好道路

举例说明:


网易云阅读

当用户从列表页进入详情页,查看一条信息之后往下拉就会看下一条,并且内容已经加载出来,往上拉就会回到上一条,这样很符合大众的习惯;这样做避免看完一条之后点击返回在从列表点击进去看另外一条。


Android的更新提醒

它是在安装包自动下载完成之后提示,避免了让用户等待下载的过程。

六、尽量少的让用户输入,输入时尽量多给出参考

核心思想:移动端的虚拟键盘既有它的优点,又有它的缺点,缺点主要有:

虚拟键盘的空间限制,手指的点击经常造成误按;

输入定位无法反馈(比如说我输入丁丁,结果搜索列表出现丁丁历险记,其实我是想搜索中国好声音的丁丁啊,嘿嘿)

举例说明:

百度地图

例如:我想找万达国际影城,当在输入框搜索「wand」几个字母的时候就会列出所有关于万达方面的内容,很容易就找到​,这样避免用户多输入的状况,很贴心。

妹子原创写得很赞,有些观点来自:《用设计为你的APP提速的6个方法》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: UI设计一款App所需要的工具和步骤包括:1.了解用户需求;2.设计原型;3.制作UI设计稿;4.编写代码;5.测试和迭代;6.发布。为了实现这一过程,可以使用一些常用的工具,如Adobe Photoshop、Sketch、Axure RP等。 ### 回答2: UI设计一款App需要使用的工具和步骤是多样的。以下是一般流程的简单介绍: 1. 预备工作:在开始设计前,需要明确App的目标受众、定位和需求。这些信息有助于我们理解用户的需求和期望。 2. 调研和竞品分析:了解市场上类似的App,进行竞品分析和用户调研,了解已有设计、用户界面和用户体验。这有助于我们理解市场趋势,得到灵感和借鉴。 3. 纸上原型和草图:根据需求和调研结果,设计师可以在纸上或使用专业工具绘制草图和线框图。这些低保真的原型帮助我们构思App的整体架构和界面布局。 4. 设计软件:选用合适的设计工具,如Sketch、Adobe XD等。使用这些工具,我们可以绘制高保真的界面设计,编辑图像、排版等。 5. 原素材准备:寻找和收集适合的图标、图片、颜色和其他视觉元素。这有助于营造一致的风格和品牌形象。 6. 视觉技巧:考虑色彩理论、排版规则和视觉层级等设计原则来增强用户界面的吸引力。 7. 动效设计:如有需要,可以添加动态元素和过渡效果来提升用户体验和界面交互。 8. 设计评审和测试:与产品团队、开发者和用户一起评审设计方案,进行反馈和改进。在设计完成之前,可以进行用户测试,以确保界面易用。 9. 导出和交付:将设计稿导出为适用于开发的格式,如SVG、PNG等,并提供给开发人员使用。 总结来说,UI设计App的过程需要合适的设计工具、研究市场需求、调研竞品、绘制原型、设计界面和动效、评审和测试等步骤,以确保设计出符合用户需求和期望的界面。 ### 回答3: UI设计一款App所用的工具和步骤主要包括以下几个方面: 1. 需求收集:首先需要与客户或项目团队进行沟通,了解App的需求和目标用户群体。通过收集用户调研、竞品分析和市场调查来确定设计方向。 2. 架构设计:根据需求收集得到的信息,开始进行App的架构设计。包括定义App的功能模块、页面结构、用户导航以及信息架构。 3. 原型设计:使用工具如Sketch、Adobe XD等进行低保真原型设计,根据架构设计的要求制作出每个页面的布局、交互和流程。 4. 视觉设计:在原型设计的基础上进行视觉设计,包括选择适合App风格的配色方案、图标设计、排版布局、UI元素的设计等。 5. 图形切割:将视觉设计的图形切割成适应不同屏幕分辨率的素材,并导出为高清图片用于开发阶段的制作。 6. 设计审查:与项目团队、开发人员进行设计审查,确保设计符合需求,并根据反馈意见进行修改和优化。 7. 动效设计:根据App功能的特性,使用工具如Adobe After Effects、Principle等制作动画效果,增强用户体验。 8. 设计规范:制定设计规范,确保设计的一致性和可复用性,使得其他设计师和开发人员能够方便地进行后续工作。 9. 输出设计资源:整理和输出设计的资源文件,包括图标、图片、视觉设计稿等,以便开发人员进行开发和实现。 10. 测试和迭代:根据用户反馈和测试结果,进行设计的迭代和优化,直到达到最终的用户满意度。 总之,UI设计一款App需要借助各种工具和遵循一系列步骤,从需求收集到最终产品的迭代优化,以确保设计符合用户需求、界面美观、易用且高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值