当前位置: 首页 >  小程序

如何从零开始设计一款漂亮的移动APP?

发布日期:2020-03-16

在这篇文章中,我将配合实例说明我在从事应用程序设▉计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助Б。

我13岁时开始学习平面设计。我从网上课程学会了设计网站,并习惯于全天使用Photoshop和Affinity Designer进行设计。那些经历教会了我如何像设计师那样思考。

我设计和开发应用程序将近有一年时间了。我参加了麻省理工学院的一个项目,与一个团队合作开发Univ▽erseaty。 两个月前,我开始研究一个新的应用程序-Crypto Price Tracker,这款APP我会在1月28日发布。

在这й篇文章中,我将配合实例说明●我在ⓥ从事应用程序设计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助。

设计并不是全部了解如何使用设计软件,这篇文章也不会教你如何使用软件。网络上有数以百计的优质教程资源可以教你学习如何使用设计软件。想做好设计,你需要理解你的产品,熟知它的特点和功能,以及在设计时始终将终端@用户放在心里。这就是这篇文章的意义所在。

设计过程:

为每个页面创建一个用户流程图。 创建/绘制线框图。 选择设计图案和调色板。⊙ 创建模型。 创建一个动≌画应用程序原型,并要求人们对其进行测试并提供◇反馈Ⅲ。 给出最后调整确定的模型,并℅交由开发按原型编写代码。

我们正式开始吧!

用户流程图

第一步是想出在你的应用程序中想实现的功能。一旦你有了你的想法,设计一个用户流程图。用户流程图是用户通过app/网站进行访问的一个非常高级的表示。

通常,用户流程图由三种形状┒组成。

矩形用于表示页面。 方块用于表示决策(例如,点击登录按钮,向左滑动,缩放)。 箭头将页面和决策连接在一起。

用户流程图是非常有用的,因为它们给出了应用程序如何运作的良好逻辑思路。

下面是我在开始设计应用程序时绘制的用户流程图。

主界面的用户流程图

线框图

一旦你完成了每个页面的用〢户π流程图并设计了用户路线,你就可以开始为所有页面做线框图了。线框图在本质上是以低保真≤度形式表┐示你的应用程序外观。基本上是图像,标签,按钮,和其它元素的一个草图或一个轮廓,这些元素都会在页面上做好布局和定位。你的应用程序的草图会体现它是如✿。✿何使用的。

我︱︳使用UI模板打印的模板来绘制线框图〥。 它既可以节省时间,而且给为我提供了一个很好的۩画布来绘图和做笔记。

下面是ч我绘制的一个线框图例子┈┉。

主界面的线框图

绘制好线框图后,你可以使用一款名为Pop的应用程序,并使用该应用程序将草图拍照存档,再通过「连结」(link to)的功能,将一张张草图串联起来,就能直接在手机屏幕上展示原型实际运作的样子。

设计图案和颜色调色板

这是Ω我最喜欢的К部分。这就像逛街一样。⿸有大量的设计图案≯和调色Ψ板可供选择。我ⓛ可以去选择我喜欢的,并感受它们给我带来的视觉效果。

寻找设计图案的最佳平台是Mobile Patterns和Pttr∞ns。想要找到好的调色板,你可以去“Color Hunt”平台。

创建模∏型

这是当♧你最终使用设计软件的时候了。设计意义上的模型是以高保真的形式来表示你的应用程序。这就像你将来实际使用时★▲进入这个应用程序,然后你从这里面做一些截图。它看起来应该很现实,非常像真实的东西。

有一些用于创建模型的设计软件和工具。我使用Affinity designer来创建模型。iOS设计中最常用的工具是Sketch。

下面是我早期设计APP中۞۞的一些实例。

我使用了各种各样的调色板来进行设计。

我给我的朋友分享了最ↂ初的模型,以获得他们的反⿰馈。很多人似乎更喜欢黄金渐变和黑色背景。

我愿意接受更多的反馈并尝试新的建议!想获得更好的用户体验的方法是多与终端用户交流。❤当你与终端用户交谈时,你会发现用户有很多奇妙的想法,而不是去疯狂地翻阅Dribbble或B└ehance。

所以我重新设计了模型并删除了背景图,因为生成它们在技术上是一个耗时的过程,除此之外,它们∶还降低了可读性。下面就是我重新设计模型后的样子。

黄金渐变和黑色背景看起来非常不错!

我对这套颜色方╢案、标签栏上的图标和整体布局都非常满意。我继续按照相同的设计指南设计了其余的页面。这是一个漫长而有趣的过程!

一旦我的页面准备就绪,我就在Adкobe XD上制作了一个原型,并请几个朋友进行使用并给出反馈。

经过最终的润色,下面是我确定的设计☆界ω面。

这就是最终的主界面!

所有的页面完成后,我将它们导入到Xcode中并开始编写应用程序代码。

这就是∈我今天要分享的内容!我希望这篇文章能够帮助你开始在设计应用程序时找到灵感,?或者帮助你成为更好的设计师。

我将以我最喜欢的设计♨名言之一来结束这篇文章。

设计不在于它看上去〡如何摸起来如何,设计在于它是确定产品如何运作的。

——史蒂夫•乔布斯

 

原文作者:Harshita Arora

原文地址:https://medium.freecodecamp.org/designing-beautiful-mobile-÷apps-from-scratch-1a3441ebd604

本文由 @Mockplus 团队翻译发布于人人都是产品经理。未经许可,禁▀止转载。

题图来自,基于CC0协议

  • 如何从零开始设计一款漂亮...

    在这篇文章中,我将配合实例说明我在从事应用程序设计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助。 我13岁时开始学习平面设计。我从网上课程学会了设计网站,并习惯于全天使用Photoshop和Affinity Designer进行设计。那些经历教会了我如何像设计师那样思考。 我设计和开发应用程序将近有一年时间了。我参加了麻省...

  • 产品经理核心技能修炼:如...

    管理产品需求是一项重要的产品经理基本功,如何管理产品需求清单,让产品开发变得仅仅有条?本着“拒绝纸上谈兵”的初衷,我想总结一下我的答案,以下6招优化产品需求清单,让你“轻装上阵”。 大部分产品经理都很忙,为了完成任务而疲于奔命,是生活的常态。产品需求清单就像一个“杂物箱”,写满了点子、用户故事、功能需求、bug……只要是和产品有关的,统统往里装。...

  • 苹果前首席设计官艾维等捐...

    12月25日消息,据外媒报道, 苹果公司前首席设计官乔尼·艾维(Jony Ive)日前向英国植树活动Be A Tree Angel捐赠了12.9万美元善款,以帮助英国学校建设果园。 图:苹果前首席设计官乔尼·艾维

  • 美媒:苹果走过辉煌十年 ...

     12月22日消息,著名专栏作家“莫博士”(Walt Mossberg)近日在科技网站《The Verge》撰文称,从2011年到2019年,在首席执行官蒂姆·库克(Tim Cook)的领导下,苹果在财务上获得长足增长,但也出现了几次失误,更重要的是,公司业务已发生本质上变化。

  • 美媒:苹果走过辉煌十年 ...

     12月22日消息,著名专栏作家“莫博士”(Walt Mossberg)近日在科技网站《The Verge》撰文称,从2011年到2019年,在首席执行官蒂姆·库克(Tim Cook)的领导下,苹果在财务上获得长足增长,但也出现了几次失误,更重要的是,公司业务已发生本质上变化。

  • 5G时代开启,智能办公领...

    刚刚过去的2019年可以被正式地称为5G元年,尤其是在2019年10月31日,中国三大运营商公布5G正式开始商用,标志着中国5G时代正式起航。我们可以预计,新一轮科技革命和产业变革即将加速演进,带来颠覆式的影响。当我们讨论5G时,我们讨论的绝不仅限于数据传输速度的提升,而是5G高速率低延迟,万物互联下所激发的无限潜力。我们已经能够预见到由5G所赋能的不同形态的创新和智能化,从“5G+智能自动化”的...

  • 苹果前首席设计官艾维等捐...

    12月25日消息,据外媒报道, 苹果公司前首席设计官乔尼·艾维(Jony Ive)日前向英国植树活动Be A Tree Angel捐赠了12.9万美元善款,以帮助英国学校建设果园。 图:苹果前首席设计官乔尼·艾维

  • 回望2019:社交战不息...

    素以“克制”而闻名的微信,于昨日破了戒。 随着微信新版本的发布,并支持朋友圈表情包评论,一时之间,“表情包斗图”大赛瞬间攻占了整个朋友圈。或软萌、或土味的表情包,颠覆了不少用户的形象,也让众人乐在其中。 同一天,远在广州的企业微信2019年度发布会上,企业微信3.0版本被正式发布。其中,客户微信朋友圈功能引发了不少关注。在这功...

  • 回望2019:社交战不息...

    素以“克制”而闻名的微信,于昨日破了戒。 随着微信新版本的发布,并支持朋友圈表情包评论,一时之间,“表情包斗图”大赛瞬间攻占了整个朋友圈。或软萌、或土味的表情包,颠覆了不少用户的形象,也让众人乐在其中。 同一天,远在广州的企业微信2019年度发布会上,企业微信3.0版本被正式发布。其中,客户微信朋友圈功能引发了不少关注。在这功...

  • 《大明风华》全网热播 阿...

    优酷《大明风华》联动古城南京  阿里文娱打造传统文化IP新体验1月15日,阿里文娱携手南京文旅,围绕南京文化、旅游、美食、公益三大方面,开启主题为“《大明风华》X南京=南京风华”的深度合作,从线上到线下,助推南京旅游热潮, 打造南京文化旅游IP新体验。“《大明风华》看得好想去南京打卡!”自上线以来,优酷全网独播的电视剧《大明风华》不仅多次拿下双网同时段收视第一,其#大明风华#相关微博话题...

  • 京东企业购服务路径再延伸...

    年关将至,却是中小企业采购人员最忙碌的时间。年会采购、春节福利、员工激励三大采购场景接连而至,如何在预算范围内选品兼顾多样性和员工满意度成为了采购人员最大的难题。特别是对于中小企业而言,采购通常由行政、HR兼任,使得高质量完成年末这种多场景复合型采购需求愈发困难。就此,京东企业购在年货节期间为中小企业采购推出“直播导购”的服务模式,通过整合700万中小企业用户画像和采购行为偏好,以直播为载体打造场...

  • 领英报告:长期和短期投资...

    领英发布了新报告“长期和短期投资回报率”。70%的数字营销人员表示,他们目前正在测量投资回报率(ROI)。 首先,LinkedIn对全球4000名B2B和B2C营销专业人士的调查发现,营销人员测量ROI的速度太快了。超过3/4的受访者(77%)在第一个月就开始测量投资回报率,1/4的受访者(26%)在广告投放的第一周就开始测量。55%的营...