有爱,有技术,有你^_^)y
╱人◕‿‿◕人╲订下契约(注册新用户)

合作站点账号登陆

QQ登录

只需一步,快速开始

快捷导航
查看: 3152|回复: 34
收起左侧

[技术教程] 【搬运】如何开始设计手机应用

[复制链接]

该用户从未签到

741

主题

259

好友

13万

积分

吃货

精神病院 院长

积分
137430
发表于 2013-4-20 13:32:23 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有账号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
本帖最后由 渣叔爱妹子 于 2013-4-20 13:36 编辑

原文:http://designmodo.com/design-mobile-apps/

手机应用设计是一个设计领域,它从几年前开始发展和进化。在2008年,随着IPhone和App Store的发布,就有了较好的手机硬件和生态系统,手机应用的开发开始变成一个更加引人有趣的市场。随着越来越多的手机应用开发,为了在开发强大的应用的同时给用户一个好的体验,这些应用的设计变得日益重要。

如今你已经知道手机应用的设计和开发是一个现实。但是如果你还不希望跟上手机应用设计的步伐,那在这篇文章里,你将能够快速的找到,什么才是开始设计手机应用最重要的东西。


市场定位 设计手机应用你需要准备和告诉自己的第一件事是拥有一个智能手机。这应该是很明显事嘛, 但这仍然是我作为已有几年大量手机使用者经验在设计手机应用时的最大优势。在成为设计者之前你要先成为用户,通过使用这些设备和应用,明白一个手机应用需要什么样的功能和存在哪些问题就很简单啦 。你的关注点应该是iPhone或Android,因为这是两大最通用的平台和OS开发。最近,随着Windows Phone 7的发布,那也是一块很大的蛋糕并且也有很多人为那平台做开发,即使你意识到已有各种各样的设计好了的应用摆在那,我还是建议你把重心放在iOS和Android上,至少在开始时是这样。
开发一个手机应用和一个桌面应用甚至一个网站的最大区别在于其使用环境,这也是让手机应用如此强大和有趣的原因。每个应用的使用都是出于个人目的,在特定的时间和特定的地点里。如果你开发了一个餐馆导航应用,你会想着去创建一些可以在最短的时间里向用户展示其想要的相关结果的功能,因为用户可能在街头上或者在移动着寻找一个最快的推荐结果。这在手机开发中开放了大量可能的创新方法,作为一个设计者你应该时刻熟知并且考察最新的应用以跟上时代清楚什么正在被创建。  



所以,如果你还不是智能手机用户,那就要去得到一个来下载和测试这些应用,因为用户的体验,对你设计一个丰富、强大的手机应用来说,是最重要的东西。还有不要仅局限在你拥有的设备里,试着了解其他的设备也同样重要。你可以看看来自各个商店的应用截图,IOS的App Store, Android的Google Play, 和Windows Phone的App+Games。我建议你检查一个服务并且看看这个服务是怎么跨越手机平台的,这样你就能明白平台之间的风格和不同。例如,在下面你可以看到Facebook在IOS,AndroidWindows Phone

                               
登录/注册后可看大图

你也应该查阅各个平台的官方设计指南文档,因为各个平台都有各自的风格和指南是你要遵循的。你可以查看iOS 人性化界面指南Android 用户界面指南,Windows Phone用户体验设计指南



视觉灵感 移动生态系统在实验和创新的基础上日新月异,每天都有很多设计方法出炉。从阅读应用,到图片分享,生产工具和todo记事,有各种各样的应用人们可以使用。每一个应用都有自己特殊的视觉效果和感觉。这依赖于应用的使用目的和内容。
视觉知识在任何领域都有,所有设计者都需要好好提高。在移动设计方面,我相信视觉更佳重要,因为每天都有新界面,新设计模式和新的移动风格。每当你为自己的项目工作时,通过观察和分析别的设计,它会告诉你一些更好的知识,更丰富的视觉设计信息。

                               
登录/注册后可看大图

你应该鼓励自己,好的应用创造出来就像说话一样简单。一些网站比如mobile-patterns.compttrns.com有很多高质量的移动应用设计图。如果你需要一些iOS图标的灵感,其实就是以应用的品牌图标,可以去iicns.com找找。
视觉灵感不仅因为它是应用程序的样子而重要,还因为在用户与它交互操作。努力学习所有可能的手势,了解用户想要与这个应用程序操作,问自己什么是最简单、最自然的方式来完成一个动作,你怎么能真正创造出来?



手机应用设计模式 在开始设计之前,你应该学习一下现有的手机应用设计模式,并且还要考虑用户的需求期望。接下来我会做一个简单的介绍。
设计模式被定义为为解决常见问题而提出的可被重复利用的方案。特里萨尼尔(Theresa Neil)写过一本非常好的关于手机设计模式的书,你可以在 mobiledesignpatterngallery.com上得到这本书还有手机设计模式的很多内容。

                               
登录/注册后可看大图

在这些设计模式中,你可以学习和分析各种各样的接口,菜单和导航条;根据手机应用的内容和目标不同,你可以使用它们作为你的手机应用程序设计的基础。
在手机上,有几种方法可以完成相同的操作,至于取舍取决于你,设计师要设计并选择最有效的方式。设计模式真的很有用,因为你可以找到解决已有问题的简单解决方案,并且你能够知道它会如何作用于你的应用程序界面。你要这样开始你的手机设计:在大脑中认真思考测试应用布局,考虑哪样做更适合你的应用程序。
问你自己这些问题:“我的应用程序的主要目标是什么?”“在我的应用程序中,有多少、有哪些最重要的部分?”“让用户都会使用我的应用程序,需要设计哪些种类的操作?”,这些问题会帮助你选择设计模式以及祝您定义应用程序的基础布局。



开始设计 有了一些信息后,测试,观察,激励并比较你能做什么和你要做什么后,就要开始准备些设计工具了。但无论如何你不应该立刻打开Photoshop就开始画了。要先思考,再画草图,再做原型,然后重复这些步骤。
对于草图,你可以找本iPhone草图书, 或者只下载些模板。这能帮你按照iPhone的布局,把你的设想画成草图。
有一些草图以后,你就大概就像做一个应用的基础版本,一个原型。 这里有很多原型你可以参考,找一个包含iOS模板的,这样你简单的修修改改就能有一个大致的样子。

                               
登录/注册后可看大图

一旦你的主屏和布局选好, 你就可以开始在Photoshop中创建最终漂亮的图片。我推荐你找一套像teehan+lax iOS templates这样的PSD来做。这样你就不需要设计那些基本的元素了,像按钮、菜单和通知栏等等。如果你在设计安卓的应用, 可以去这里
已经有很多的设计资料来帮你设计应用。Pandora UI from Designmodo是一个完整的用户界面包,风格各异,你可以简单的选你喜欢的用在你的应用上。




移动应用设计示例
结语 在立刻着手开始设计移动应用之前,还有一些很很总要的事情。一如往常,每个人都有自己的工作流程,有自己偏好的应用,所以,试着选择你的平台,你最喜欢的设计软件,你的模板,在移动领域发挥你的创造力,这是一个很好的平台。
当你设计完成后,尽可能同开发者更紧密的合作,以保证你的视角和设计在开发后同你想象的一样,这样你就能对开发者帮助指导,给予他们需要的资源。同网页开发一样,这是一个无聊且棘手的工作,但它确实必须的,这样你的产品才能达到你所预期的效果。



游客,如果您要查看本帖隐藏内容请回复


                               
登录/注册后可看大图
该贴已经同步到 渣叔爱妹子的微博

评分

参与人数 1宅币 +55 贡献 +8 元气(技能点) +2 收起 理由
玊子 + 55 + 8 + 2 o(* ̄▽ ̄*)ブ 发糖

查看全部评分

人非圣贤 孰能不淫荡不抢沙发 何以为人
回复

使用道具 举报

该用户从未签到

9

主题

24

好友

3935

积分

序章

积分
3935
发表于 2013-4-20 14:21:40 | 显示全部楼层
沙发
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

99

主题

29

好友

1万

积分

第一章

积分
13318
发表于 2013-4-20 21:06:17 | 显示全部楼层
图片全挂了
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

21

好友

1万

积分

第一章

积分
10906
发表于 2013-4-23 00:43:04 来自手机 | 显示全部楼层
果断收藏!!!老早就想自己动手制作一个手机软件了。例如课程表那种!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

30

主题

67

好友

1万

积分

第一章

积分
16057
发表于 2013-4-24 09:14:41 来自手机 | 显示全部楼层
收藏,我正在学习如何构,好难哦。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

41

主题

47

好友

1万

积分

第一章

积分
15476
发表于 2013-4-25 19:25:57 来自手机 | 显示全部楼层
受教了!来自: Android客户端
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

9

好友

1776

积分

Continue

积分
1776
发表于 2013-4-27 10:19:28 | 显示全部楼层
mark  貌似以后会用到的
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

2

好友

4403

积分

序章

积分
4403
发表于 2013-4-29 16:45:27 | 显示全部楼层
谢谢楼主!很有用
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

4

主题

8

好友

3817

积分

序章

积分
3817
发表于 2013-4-29 19:23:30 | 显示全部楼层
渣叔。。。图碎完了。。。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 3 天

连续签到: 1 天

[LV.2]偶尔看看I

9

主题

18

好友

5421

积分

序章

积分
5421
发表于 2013-4-30 19:41:16 来自手机 | 显示全部楼层
好帖收藏之
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

152

主题

243

好友

5万

积分

第三章

积分
56446
发表于 2013-5-1 12:22:24 | 显示全部楼层
图全挂了。。。。。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

62

主题

52

好友

6万

积分

第三章

牛逼闪闪的美少年 ❤❤❤❤❤❤❤❤❤❤

积分
64161
发表于 2013-5-1 13:54:16 来自手机 | 显示全部楼层
太高端了 !
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

237

主题

72

好友

7万

积分

第四章

积分
71691
发表于 2013-5-7 23:19:08 | 显示全部楼层
=L=纯观摩
神隐╮( ̄▽ ̄&quot;)╭
回复 支持 反对

使用道具 举报

该用户从未签到

196

主题

7

好友

3万

积分

第二章

积分
34013
发表于 2013-5-8 00:32:20 来自手机 | 显示全部楼层
虽不明,但觉厉
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

12

好友

3423

积分

序章

积分
3423
发表于 2013-5-10 13:09:55 | 显示全部楼层
好高端,另外,图片看不到了~~
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

本版积分规则

小黑屋|手机版|技术宅(基宅) ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-5-1 09:34 , Processed in 0.837910 second(s), 49 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表