饭世钢5分钟设计手册——App设计基本点

首先,这里有一些好消息,也有一些坏消息。当然,也可能对你来说,都是好消息——你终于拥有开发自己App所需的所有工具了!

如今,App的开发技术与工具变得越来越方便与人性化。坏消息就是——你并非唯一一个知道这件事的人。着手开发自己第一个App的人遍布世界各地。当然,还有一个好消息。你所需的一切关于App的设计基本点可能就在这里。

现在的App开发产业规模空前。每一个企业,不管是体育、连锁、五金杂货,都在寻求自己的App。谁不希望自己喜欢的球队、纷乱的购物清单就在自己的手边,就在自己的口袋里面?

1.jpg

https://dribbble.com/shots/1207907-Wireframes

在为自己设计App的过程中,你需要负责产品的外观、感受,以及App与用户之间的关系。其中的可能性是无止境的,然而,发挥空间越大也意味着出现闪失的频率也会越高。

让我们看看当设计自己的App时,需要牢记的基本点。

首先,前期调研

在打造自己的App之前,称赞一下自己吧,欢迎入坑哈哈。接下来,你就要开始有趣的旅程了,虽然会遇到不少困难,但是回报还是很丰厚的!

知之为知之,不知为不知,是知也。但不知道的可不能放在一边不管了,不知道就要学习、掌握它。如果你想打造自己的App,首先就要了解App。如何了解?使用它、勤用它。以一名用户的身份使用它,你才会明白它的闪光点与不足之处——哪种字体看起来更舒服,哪种设计更易用。

App和网站、客户端相比,有着极大的不同。但你现在已经是一个深度用户了,并且是智能手机的深度依赖患者,难道不是吗?在体验过程中,你也感受到App的独特、个性,但也有其局限和侧重点。在你设计自己的App时,请记住这些——它很强大,但并非万能。

还有一个需要牢记的是App是不断迭代更新的,它所依赖的软硬平台也是如此。如果你想走在这一行的前列,那么,时刻保持对技术革新的敏锐感知是你的基本素质,这也能使你的App保持活力、散发光彩。

记住,温故最新的官方设计文档——iOS Human Interface GuidelinesAndroid User Interface Guidelines

其次,更多地调研

“你为什么要这样做?你打算怎么实现?”是你在App开发之初必须扪心自问的两个问题。虽然很艰巨,但是却很有必要。

2.jpg

https://dribbble.com/shots/992731-Wireframing-Close

你为什么要这样做?你设计这个App是为了实现什么?这是一种营销手段吗?你会因此获得额外的营收渠道吗?或者它仅仅是原本产品的移动版本?

走到这里,你有两个目标。
首先,开发出一个为你所用App。其次,利用它获益,无论是金钱上的、还是舆论上的。如果你在设计过程中对第二个目标了然于胸,你做出的产品就会更能发挥效用。

你要如何开发这个App?列出你必须完成的任务将会极大助力于你的开发。定期检查并衡量每一项任务的情况,是管控开发最有效的方法。

此外,想一想谁将会使用你的App。从设计和用户的角度综合审视自己的App,你将会打造出令双方都满意的产品。

研习你的竞品

知己知彼,这不仅是武术切磋还是厨艺比赛中所需要的战术。对于App,这也是明智的你所需要做的功课。已经有不少网站、论坛为用户提供了评论功能,深挖几个小时你就能够对目前的市场有个比较清晰的宏观了解,用户需求也就自然浮出水面。在你开发App之前了解用户的偏好能够为你节省很多宝贵的时间。

当然,“顾客永远是对的”,但不要盲目将它应用到互联网领域,用户并非总是知道他们真正想要的。细心观察,潜心学习吧。下载一些App,看看他们的可取之处,发挥你的才干去做得不同。

寻找灵感

3.jpg

https://dribbble.com/shots/1367175-Sleep-Tracker-UI-Part-2-UX-iPhone-interface-App-iOS-7

这是一个庞大的、多元的、年轻的领域。每天都会有成千上万的App诞生,总会有一些新颖的东西吸引着我们的眼球。当你遇到麻烦,好像身边总有人会告诉你,用这个App吧。App深刻地改变了我们的生活,它是如此惊人的强大,竞争也是如此惊人的激烈。如果你想脱颖而出,那就既要与众不同,又要平易近人。尽力做到独特而又可用吧。

除了功能的可用与独特,收集视觉上的灵感也是App开发的重要一环。这也是将你的印记留在这个行业的一种方式。想想目前的操作手势。技术在不断的进化、发展。想想还有什么没有实现。多问问自己,什么才是完成这件事最最自然的方式?双击,滑动,还是输入?

记住:灵感能够使你进步,能够大大改善App的体验,而照搬不能。

现在,该设计你的App了

4.jpg

https://dribbble.com/shots/934508-Secret-Project

是时候将你做的所有功课发挥作用了。回想一下你体验过的App以及用户留下的所有评价、顾虑、建议。记住这些,然后酝酿自己App的面貌、所要传达的感受以及如何被用户使用——在纸上、用任何你所熟练的软件开始你的设计吧。

万事开头难,这一步是非常耗时的。但不要忘了,在这里花费时间是值得的——后续的开发会更加流畅。

5.jpg

https://dribbble.com/shots/2644059-nili-iOS-app-bars-clubs

在对你的App有了蓝图之后(蓝图既可以是纸上原型、也可以电子文档),就该建立App的框架了。现在市面上有很多原型设计软件,选择一款你熟悉的、或者与你的设计流程较匹配的就行了。

在这一阶段,首先要确保你的App基础功能的可用性,这应该不需要多做解释了。围绕核心体验进行设计是确保App使用体验的稳妥之举。我们呈现给用户的应是愉悦的使用感受,而不是繁杂的功能堆积。积累了那么多想法,你的App原型难免会有不同的版本,不要困扰,这些对设计开发是有助益的。但还是要清楚什么才是基本的,从基本入手,无论你选择哪一个版本,即便会有不足,但能保证你的App的可用性,这是很重要的。

细节考量

细节决定成败。细微的错误能毁了整个产品,细致的设计也会成就你的App。灵动的音效、大方的字体都会有助于您的App在市场中脱颖而出。

导航

6.jpg

https://dribbble.com/shots/2646724-Daily-Planner-dailyui-05

你的App的导航应该是简单清晰的。如果用户无法定位他们所要的,他们也就无法获得完整的体验。直观的操作感受先行于风格设计。各大搜索引擎、门户网站的导航吧,毕竟是经过大量实践检验的。

有经验的设计师都不会把设计的重点放在导航的创新上。我们不应把过多的个人色彩加入其中——需要用户学习的导航设计是失败的设计。

字体

7.jpg

https://dribbble.com/shots/2652053-ToDo-App

这是你App的设计重点之一。文字难以识读、排版混乱的App是没有可用性可言的。

由于App的空间有限,行距、字间距是需要细心调整以达到最佳效果的。最大限度利用仅有的空间进行版面设计,千万不要使用缩小行距、字间距的手段来为图片挤出空间。

对于重度阅读性App,你需要为用户提供自定义字体的可能,但你并不能逃脱为每种字体设计调整最佳显示效果的责任。提供可选字体,能够加深用户对你App的好感。如果你出于某些原因没有去这样做,那一定要让你的App可读、时尚、与整体风格匹配。

配色

sportify-fitness-app-ui-kit.jpg

人生来对色彩有不可把持的欲望。为你的App选择完美的配色非常重要,而这一经历可能会很有趣,也可能极具挑战。过多的颜色会分散注意、造成混淆。尝试不同的配色以测试你的方案虽然麻烦,但可能已经算是最佳的途径了。我们的目标是配色对比舒服而不强烈,而且你的内容不会淹没在背景之中。对颜色来说,少即是多。

测试、测试、再测试

到目前为止,你的想法可靠、设计漂亮、配色协调、排版时尚。那么接下来呢。接下来就是要确保你的App能够完美运行的。在各个手机上测试你的App以保证绝大多数用户的体验——情感愉悦、功能完备。这就是我们所要追求的细节——单手操作时拇指能够触摸到所有重要的按钮吗?可以。那么双手操作时另一个拇指会挡住重要的信息吗?

8.jpg

http://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier

另外,同样重要的是,你能保证App能够在旧版系统或配置较差的手机上的较优体验吗?确保所有的用户都能完美地体验你的App是你成功的关键。

写在结尾

9.jpg

https://visualhierarchy.co/shop/product/soundify-music-app-ui-kit/?utm_source=designyourway_basicsmobileapps

现在,你了解了App设计的所有基本点。开始着手设计你自己的App吧。机会就在眼前,是时候施展你的才干了。

此外,如果你想保证你的想法能够被开发完美实现,最好与他(们)近距离密切合作。看到倾注数个月的心血“走样”绝对不是一种好说的事。所以,尽管最后这一部分可能是无趣乏味,但它也是实现你设想最最必要的付出了。

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,123评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,031评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,723评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,357评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,412评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,760评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,904评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,672评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,118评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,264评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,857评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,744评论 25 707
  • iOS配色、字体、排版 13年,Apple Inc.推翻了拟物化设计,走向现代化的扁平iOS7。视觉上更为简单,将...
    饭世钢阅读 477评论 0 2
  • 这道题,要实现一个克隆函数,一看就是原型链的效果,就利用Object.create()来继承prototype c...
    进击的前端阅读 133评论 0 0
  • 我已经不记得自己有多久没有写文字了,好像文思枯竭。也许是自己太懒,也可以推给生活,日子太匆忙,太无奈,总之我感觉自...
    七月的小谢谢阅读 182评论 0 0
  • 这次终于下定决心要好好搞一个技术博客了,之前搞过一个腾讯微博的,但是没记两天就不计了,这次决定要正式稿一个了,...
    前行的乌龟阅读 258评论 3 1