美文网首页设计学习DesigniDesign
【译文】6个界面设计的小改变,使你的app从平凡到惊艳

【译文】6个界面设计的小改变,使你的app从平凡到惊艳

作者: sure天亮 | 来源:发表于2016-02-06 15:59 被阅读1334次

    原文作者:Proto.io

    原文地址:https://medium.com/p/88ecb840622b

    现在,你的移动端app已经完成了从线框图到高保真原型图的设计,但总觉得好像还缺点什么。或许是它用起来并没有想象中的流畅,又或者是用户体验方面的设计并没有让你感到惊艳。你想让你的app看起来具有魔力,但是现在看起来,更像是你爸突然从你耳后变出了25美分的硬币的小惊喜,而不是大卫·科波菲尔把金字塔变没了的那种震撼。

    这时你会怎么做?难道将已做的一切推翻,然后重新从草图开始设计?

    又或者使用魔法,做一些设计上的小变动,使app能够得以保留并完善。毕竟,在设计出线框图或者测试版之前,你会非常的关注设计,所以一定有一些好的想法存在于现有的app中——更何况如果将之前辛苦的工作都浪费了,不是很可惜吗?

    我们采访了6位设计师,不知在他们看来,哪些细小的设计调整能够对ui界面设计产生最大的影响呢。或许他们的回答能启发你,如何在整个app的设计流程中完成完美的最后一笔,使app能够由优秀变为大受欢迎(甚至是由大受欢迎变为令人惊艳!)

    1.同样的内容出现在小设备上,记得去掉多余的部分

    当你在一款小的设备上使用app时,很有可能你根本就不愿在阅读上花费大量的时间。不仅仅是因为从较大设备上复制而来的过多内容降低了用户的阅读速度,同时也会使用户体验变差。

    Maureen Kerwin是一位在Nokia Networks@nokianetworks)工作的交互设计师。关于如何立刻使某一款app的设计得到提升,Kerwin的建议是——设备转换时,重新审视从大设备中复制而来的内容,同时砍掉不需要的部分。

    “注意在所有复制的内容中,那些重复或者太过啰嗦的地方,”Kerwn说,“一个app中总有可以删除或者修正的内容,修正他们能使整个软件更加清楚和简洁。”

    在这种情况下,交互设计师的好搭档或许就是编辑或者测试。当你不能决定哪部分需要砍掉(或者简化)时,盯着看几秒,你的视觉目标系统此时起着最重要的作用,他们会告诉你如何去做。

    2.获得用户反馈

    如果你急切的想知道app中的ui界面设计是不是有效,光是想想是没用的,最直接快捷的方式就是从用户那里获得答案。

    Mike De’Shazer(@itsdeshazer)是CodeCloud.me@CodeCloudMe)的联合创始人和CEO,CodeCloud.me是一个教用户如何编程以及制作app的互动平台。了解你的用户,从他们中间获得反馈,是使你的界面设计变得更为有效的最可靠的方法,De'Shazer说。

    “不同的产品目标有着不同的ux优化方法,”De'Shazer说,“对于任何一款产品来说,完善界面设计和操作体验的最好方式,就是更充分的理解使用这些产品的人们。”

    当你的app无法达到你的预期目标时,找些测试用户使用产品的原型。他们对于完善操作体验的建议,或许是你能得到的最有价值的反馈。

    3.使app操作快捷

    你的所有现有用户(以及潜在用户)都有着对于更快的运行速度的追求。如果你感觉你的ui界面并不是你想象的那种体验,或许最大的问题并非界面设计,而是app本身的运行速度。

    GadgTecs@GadTecs)是一个展示app,数码产品以及科技消息的技术博客,Amna Rizvi是其中的一位app开发者。作为移动app的开发者和观测者,Rizvi认为速度和启动时间是优化界面设计最重要的两个方面。

    “对我来说最重要的就是app的启动时间,”Rizvi说,“app应该有一个令人眼前一亮的闪屏,并且加载的速度应该非常非常快。”

    毫无疑问,第一印象是非常重要的,Rizvi说。“如果用户打开app,但是需要等待很长的时间才能开始使用,那么他们就会毫不犹豫的关掉app。所以在我看来,无论app体积有多大,都应该能够迅速反应,方便操作。”

    最近的更新没有使app的使用更快?如果没有,那快去看看操作流程有没有得到合理的优化。除了需要使登录速度更快,还可以考虑在用户界面中加些动画效果,这样也可以使等待的时间看上去变短。如果这仍旧不能使你的app更有光彩,那么请看下面的建议。

    4.用动画装饰你的UI界面

    Andrew Riley是Ticketlab@ticketlabUK)——一家在线票务网站的创始人。他同时也是一位数字顾问和前端工程师。

    对Riley来说,优化UI界面最快捷的方法就是添加动画。

    “如果想要改善网站页面或者app的使用感受,我的第一建议非常简单:就是使用动画。我说的动画并非指那些跳跃的logo或者flash时代的镜头光晕之类的,而是指精妙的动画效果。”Riley说,“其中最简单的形式,就是在一个悬停状态中添加背景的颜色转变,这时只需要提供0.3秒左右的时间,颜色呈线性变化。这样做能直接使你的UI界面区别于网站,而更像是一个app。”

    这个小的设计改变最好的地方在于不会花费太长的时间,但可以收到良好的效果,Riley说。“动画能够以灵活的方式被应用于几乎所有的状态转变,从而能够用设计真正的影响生活。尽管这种由CSS编写的功能出现的时间还不久,在很多app中尚未得到合理的利用,但是它只需要多花费很少的时间,就可以在各类项目中使用。”

    One Click Here@Oneclickhere1)的CTO Gert Hattingh也同意这样的观点。他说,在One Clicl Here,设计师和开发人员会在多种平台上测试ui界面,确保动效流畅且表现精确。

    “在配合快速的环境中工作,能使你在开发阶段就开始测试ui。我们更偏向通过采用动效转换来指导用户进行下一步操作,”Hattingh说。“当给按钮添加动效后,不仅可以帮助用户了解接下来需要进行哪些操作,还可以提升整体的操作体验。”

    动效能够吸引用户的视线,通过具体的交互操作指导他们使用产品,还可以给你的ui界面增添非常缺乏的吸引力,但是切记不要做得太过——正如我们下一位分享者提醒我们的,有时候少即是多(less is more)。

    5.简化,简化,简化(重要的事情说三遍)

    没有用户希望被视觉上过于强调的不和谐“噪声”所打扰,无论是颜色太过自由夸张的使用,还是视觉质感的过度滥用(即使你是拟物化的忠实信徒,你还是会不由自主地在设计中过度的使用阴影和光影)。

    Amrita Talwar是一位在Android以及iOS app中都有着丰富经验的开发者,这其中包括PoolMyRide(@poolmyride),一款帮助用户寻找拼车伙伴的跨平台app。依据Talwar的经验,使ui设计从优秀变为大受欢迎的关键就是始终保证它是简单的:

    “设计一款app就像是编写一首没有歌词的歌曲——它理应能被全世界的人所理解。要使设计出的app界面美观且用户友好,我会遵从以下几点:

    ——考虑使用material design的扁平化icon,并且确保你的ui界面会根据不同的设备缩放尺寸。

    ——减少点击、手势或其他用户需要进行的交互操作的次数。无论你想让用户进行什么操作,都应该尽可能的减少点击的次数。

    ——保持ui界面的简洁。作为一个设计师,有时真的控制不住自己在ui界面中添加许多不必要的元素,但是一定要优先选择用户真正需要的。有时候最好的方式就是只保留最重要的功能,而放弃掉那些”有它会更好“的元素,否则你的整个设计很容易变成一个网络垃圾。”

    改进后的设计应该能够减少用户的使用困惑。你的界面设计应该帮助他们使用app——而不是阻碍他们的操作。

    6.跳脱出惯有的设计思维

    有时候,无聊设计的罪魁祸首是缺少新的点子。这种情况对于身处一个行业多年的人是很常见的,尤其是多年还处于同一研究方向的人更是如此。你有没有注意到,不知从何时起你的许多ui界面开始相似——一样的闪屏,一样的动画,相似的按钮、Icon和字体?

    或许是时候放下你最近的工作,去看看别人的app来冲击你的固定设计思路了。推荐从今年最佳app的前十名榜单开始看起,这些app来自于众多富有潜力的公司,吸收当下最具革命创新的ui设计理念。仔细观察这些app设计的不同之处,思考自己能从中获得哪些经验。

    对于一个刚入行业的新人,也不要总是局限于移动端app的设计,最好能够涉猎广泛。比如玩电视游戏可以学习如何有意思的讲故事去艺术博物馆参观可以激发很多精彩的想法。哪怕仅仅是在业余时间和你的孩子(或是侄子、侄女)玩耍,也能够对ui设计有着更加深入的思考。

    不想从椅子上离开?只需要好好读读这篇文章,看看其他设计师在陷入创意低谷时如何获得好点子的。有时,灵感就存在于最不可能的地方。

    以上这些来自6位成熟设计师的圣经指南,有没有使你获得灵感,从而使你的ui界面从平庸变为美的产物?在推特上告诉@Protoio吧!

    微博:@sure天亮 ⬅️日常蛋逼为主

    转载请联系本人

    相关文章

      网友评论

        本文标题:【译文】6个界面设计的小改变,使你的app从平凡到惊艳

        本文链接:https://www.haomeiwen.com/subject/nujrkttx.html