androidui在线设计-能同时用于 Android 和 iOS的APP UI设计怎么做

现在原型设计工具有很多,那我今天就罗列一些UI设计师和产品经理经常用到的工具,以此提高工作效率,又好又快的完成工作。

第一款:Axure

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理

第二款: Adobe XD

Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。

第三款:Mockplus(摹客)

Mockplus,一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上,采取了隐藏、堆叠、组合等方式,把原本复杂的功能,精心安排。上手很容易,但随着你的使用,功能层层递进,你会发现更多适合自己的有用的功能。新手不会迷惑,熟手可以够用。值得一提的是这是一款国产工具,我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际(很多老外也购买摹客英文版)的前列,不论是原型设计、流程协作还是设计规范,都能够在摹客完成,非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件,界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。

网页链接

- 可分工协作,多人编辑同一个项目;

- 通过评论和标注原型,完成对项目的审阅;

- 提升开发团队的生产力;

- 大大降低沟通交流成本。

第四款: Justinmind

JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程,就可以在原型上定义简单连接和高级交互。

第五款:Balsamiq Mockups

Balsamiq Mockups是一款共享软件,每个lisence授权是79美刀,对个人用户来说,价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域,特别是web原型图设计领域,还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像,看上去非常美观、清爽(当然,跟使用者的设计水平也有关系)。它支持几乎所有的HTML控件原型图,比如按钮(基本按钮、单选按钮等)、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外,它还支持目前如火如荼的iPhone手机元素原型图,这为开发iPhone应用程序的软件工程师提供了非常好的设计图。

第六款:

是一个专门用于移动应用的产品原型工具――可以构建和部署全交互式的移动应用的原型,并且可以模拟出相似的成品。基于Web的在线环境,它可以让你制作流行的 iPhone,iPad,Android 手机以及任何带有屏幕界面的产品原型。

No.1 站酷  

站酷 (ZCOOL),中国设计师互动平台。深耕设计领域十二年,站酷聚集了650万设计师、摄影师、插画师、艺术家、创意人,设计创意群体中具有较高的影响力与号召力。不得不说,站酷从早期的设计素材发布站转型到现在的设计师平台后,无论是流量还是知名度都有大幅提升。

No.2 Dribbble  

Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

分享一个小心得:每次在做配色时如果没有好的想法,进Color里,输入自己预先想好的主色,就可以看到Dribbble大神们基于这个颜色做的设计了。比如,你想基于#FFCC00来进行配色,但没有好的想法,可以试试 

No.3 UI中国  

界面设计垂直社区、中国人气最高的图形界面设计平台。以图标设计交流分享为核心,逐渐发展成为耳熟能详的用户界面交流,主推设计师作品。

No.4 Uispace  

网站里主要搜集了一些炫酷的创意工作者的高品质设计资源。有很强的视觉冲击力。

No.5  

Awwwards不仅仅是一个展示网页设计的网站,他邀请一些有地位的设计师,博客和机构组成一个多学科的评审小组对设计师的网页设计进行评分,大家可以查看获奖者及被提名人的作品,Awwwards也会举办会议来嘉奖那些对网页设计做出贡献的获奖者,它也会帮助相关机构发布招聘信息,同时,它还拥有自己的网上商店用于售卖网页设计相关书籍。

No.6 牛大拿  

早期只是一个设计师导航,跟其他同类网站没什么区别。后来逐步完善体验和内容,也是国内目前唯一一个支持Retina视网膜屏访问的设计导航网站。推荐的都是国内外口碑很好的设计类网站。最值得称道的”设计导读“功能”,自动抓取国内外几大设计网站的最新内容,设计师每天打开这个页面,就可以访问到最需要的内容。

No.7  

一个老牌的设计类内容网站,除了设计师关注的灵感,素材等内容之外,还会有一些前端内容,但是让人欣慰的是,他提供的一些JS特效,都另外提供一份在线demo,帮助小白们通过实例来理解学习。

No.8  

这个网站主要是LOGO设计欣赏。经常更新一些国外设计大神的LOGO设计作品,通过他们的配色,形象设计,结构安排,可以学习到很多LOGO与标识设计上的精髓。

No.9  

图标搜索引擎,需要下载图标素材,或者想在获得图标设计灵感的,Findicons一定是你不二的选择。

No.10  

网站里有时下最新最热的PSD,illustrator矢量、UI设计、网站模版、免费字体、等设计素材,是一个为设计师而生的网站。

遵循这些步骤,你的 App 就能同时在 iOS 和 Android 保持完美!

1. 总体的样式

从 iOS7 以后,Apple 就一直在采用扁平化的设计模式,去除了所有不必要的纹理和阴影等效果――和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定,通过一种叫“纸片”的方法来创造更多的层级关系。

2. 实体按钮

Android 有一个返回按钮,点击它可以返回上一个屏幕。

iPhone 上则没有这样一个按钮,所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。

3. 通用元素

两种平台之间的确存在着一些通用的元素,比如说状态栏和标题栏,它们会出现在每一屏的顶部。你不应当改变导航栏的高度,如果你想让 App 看起来更加原生的话。所以,我推荐你在设计的第一页就定义好标题栏的样式,然后在其他的屏幕上使用一个占位的方框来替代,这样能省下不少时间,但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。

不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的,然而 iOS 上是居中对齐的。在 iOS 上,很多企业都用它们的 logo 来替换首页标题栏中的文字,但是在 Android 设备上这不是一个好的主意。状态栏(显示你的网络、电量和时间信息)是系统组件,你不需要考虑设计它,只要确保它们不会对他人造成误解就好了。

4. 导航

或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单,Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中,这种体验是一贯的。Apple 的导航样式更倾向于 tab bar,它位于屏幕的底部,并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候,你可以为不同的平台设计不同的导航样式。

5. 要不要用卡片式

在 UI 设计中,卡片正逐渐成为一种主要的 UI 设计样式,它们可以应付多种情况,而且给用户提供了一种能够呈现有效内容的便捷方式。视觉上,卡片非常适应于 Android 的 Material Design(它事实上源自于纸张的灵感)。使用阴影和卡片之间的合理间距能够创建一种自然的外观。

在 iOS 上,使用卡片设计需要更加的小心谨慎,尽管一些大型的 App,诸如 Facebook 和 pinterest 的确使用了一种略微偏离 iOS 视觉规范的设计风格。Instagram 使用了一种完全扁平化的设计风格,尽管从结构的观点上看,用户的每一条推送都能被视为是一张卡片,instagram 的设计很值得你去花时间揣摩,它是如何遵循 iOS 视觉规范的。如果你要在 iOS 平台上应用阴影,你最好小心谨慎,尽量使得这些阴影不是那么的明显。

6. 排版

iOS 系统上的默认字体是 Helvetica Neue,在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异,但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间,那么用一款字体就可以,但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时,我建议你还是同时用这两种字体测试效果。

如果你想要精益求精,那么你就要对不同平台上的设计规范更加注意。比如如下几条:

Android 的 MD 设计需要用到更多的空格来进行布局

在 MD 中字体大小的变化会更加多样

在 iOS 上,字体没那么多大小差异,但是在字体重量上(Font weight)有更多的变化,同样允许你创建主次结构

两个平台都使用比较细的字体来现实正文内容,然而,在下面的例子中,Android 使用了轻(Lighr)和常规(Regular)字体,而 iOS 使用了粗体(Bold)和常规字体

这是一个非常简单的例子,向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异――你能很快分辨你是在用 Android 手机还是在用 iPhone!

7. 网格和触摸元件

iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。

在最近的项目上,我发现遵守 Android 的这些设计规范会更加安全,因为大一些的 48px 的按钮在两个平台上都表现良好,而且 MD 的规范更加全面,还经常更新。不管怎么说,你都应该在设计中使用网格,但是我们发现定义更加明确的 Android 网格会更好用一些。