在iOS 7测试版发布后,网上开始出现大量关于iOS 7设计的资源。在WWDC期间,苹果曾为开发者举办了多场主题演讲,其中有一场是苹果UX布道师Mike Stern的精彩演讲-- 优秀iOS设计最佳实践指南。这是 Mike Stern(国外) 写的一篇文章!
这篇演说的第一部分提到了什么是苹果眼中的优秀应用设计,接着他列举了设计应用图标时应该考虑的六个重要元素。
首先 Mike Stern 解释了 UI 和应用图标的重要性:用户并不会根据你使用了多少技术,或是整合了多少 API,或是你使用的代码有多牛逼而去对应用做出评价,而是你的应用能让他们做什么,给他们什么感受。用户期待你的应用能为他们带来直观的、美妙的甚至不可思议的体验。
六招助你设计优秀图标
有一些错误是开发者们经常犯的,它们也导致了许多应用未能通过应用商店的审核,糟糕的应用图标设计就是罪魁祸首之一。
应用图标是你的应用的第一道窗户,为了博得用户的好感,你得想方设法冲出重围。下图是苹果应用商店中“照相”类应用的截图,在遍地的“相机镜头”中,Path 让人一目了然。记住,美观和易于辨认是设计图标时两个主要的品质。
当用户在应用商店注意到你的应用图标的时候,他们就开始展望它所能带来的用户体验,用起来有多舒服,它会有多直观,它能多大程度上满足用户的需求。如果一个应用的图标让人感觉是经过精心设计的,那人们通常会假设整个应用也同样是经过细致打磨的。不错的第一眼印象才会促使用户打量这个应用的其余特点——你所使用的技术有多好?你的应用有多安全,多稳定?与竞争者相比更优秀吗?所以,投入时间专注设计你的应用图标真的很重要。
现在让我们来看,什么能让你的应用图标出类拔萃?首先是美观,其次更重要的是易于辨认。怎样才能做到这两点?来看看下面这六招:
第一招:使用独特的图形
下面这四个图标互不相同——其中一些包含了很多颜色或是渐变,但是以简单的图形示众是它们共同的特点。这让它们一眼看上去就能被认出来。
图标会以多种不同的尺寸出现,在应用商店中,它们会比较大,在手机主屏上又会比较小,出现在通知中心和应用文件夹中时,就更小了。请确保你的应用图标能各种尺寸缩放自如并始终保持清晰的识别度。
第二招:谨慎用色
不要滥用颜色,一种或两种就够了。的确有很多优秀的应用图标设计采用了很多颜色,但这种做法很难受待见。
第三招:避免使用照片
尽量别直接拿照片来做应用图标。下图中的 Sipp 是一个极好的例子,告诉你怎样在采用了类照片的元素的同时,更好的表现主题。
第四招:避免使用大量文字
图标中能不用文字就不用文字,好的做法是使用符号或公司标志作象征。下面这几个是优秀案例。

 第五招:准确传递信息
简单来说,要让用户看到你的图标就知道它是干什么的。iOS 7 对拟物化图标进行了大刀阔斧的改革,但这里依然要提到拟物化设计的亮点。2012 年 Apple Design Awards 冠军应用设计 Paper 直白地告诉你它的内容,Square Wallet 和 One Password 也同样。LifeKraze 的图标深得拟物化精髓,让 Mike Stern 都不禁赞叹“不知道他们是如何设计出来的,这简直是艺术的最高境界。”
第六招:富有创意
创意让你的应用图标脱颖而出,下面这些应用都谨遵创新法则。通常,秘诀是开发一些简单的概念,有时候最复杂的渲染也是建立在简单的图形之上的。
PS:在不同的背景墙纸上测试应用图标的视觉效果
确保你的图标在所有种类的墙纸上都看起来不错,也不要忘了测试把它放进文件夹后的效果。
案例研究:
Turnplay
Turnplay是一个可以在 iPad 上模拟黑胶唱片播放的音乐播放应用,它的图标设计出自著名图标设计公司
Ramotion之手。
Ramotion 开始动手设计的时候,采取了他们一贯的做法——素描来进行绘制。可以从下图中看到团队所进行的不同尝试——把产品打头字母 T 放进图标里、在唱片上添加指纹等等。
最终成果如下图:圆形唱盘加三角形播放键——两种基本图形的简约组合。
自:cocoachina翻译

苹果教你六招:设计优秀的icon的更多相关文章

  1. IE-“无法浏览网页” 教你十招解决疑难杂症

    “无法浏览网页” 教你十招解决疑难杂症 相信大家也有遇到过像IE不能上网浏览的问题.下面就来给大家介绍一下常见原因和解决方法: 一.网络设置的问题 这种原因比较多出现在需要手动指定IP.网关.DNS服 ...

  2. 开源软件项目管理系统招设计/开发。。。。。Zend Framework2架构 svn://735.ikwb.com/pms

    开源软件项目管理系统招设计/开发.....Zend Framework2架构svn://735.ikwb.com/pms

  3. 教你一招 - 如何安装nopcommerce2.5

    教你一招 - 如何安装nopcommerce2.5 29. 五月 2012 16:22         /          wcf         /          教你一招 . 解决方案    ...

  4. 文章如何做伪原创 SEO大神教你几招做"原创"网站文章的心得

    想要创作出好的文章并被百度所喜欢,就非常需要SEO的优化能力,以及要对文章进行塬创或伪塬创,那么,如何做伪塬创文章?以及如何做好塬创网站文章呢?对此,本文小编就为大家带来了几招做"塬创&qu ...

  5. Android常见内存泄露,学会这六招优化APP性能

    很多开发者都知道,在面试的时候会经常被问到内存泄露和内存溢出的问题. 1.内存溢出(Out Of Memory,简称 OOM),通俗理解就是内存不够,即内存占用超出内存的空间大小. 2.内存泄漏(Me ...

  6. PDF怎么替换页面,教你一招秒实现

    PDF格式是在办公中比较常用的文件格式之一,虽然很好用,也很容易携带,但也容易出现一个问题,当你想要对PDF文件操作或者修改的时候,才发现PDF文件不是那么容易就能进行编辑和修改的,特别是需要对PDF ...

  7. 前阿里P8架构师谈如何设计优秀的API

    随着大数据.公共平台等互联网技术的日益成熟,API接口的重要性日益凸显,从公司的角度来看,API可以算作是公司一笔巨大的资产,公共API可以捕获用户.为公司做出许多贡献.对于个人来说,只要你编程,你就 ...

  8. 线上Bug无法复现怎么办?老司机教你一招,SpringBoot远程调试不用愁!

    前言 在部署线上项目时,相信大家都会遇到一个问题,线上的 Bug 但是在本地不会复现,多么无奈. 此时最常用的就是取到前端传递的数据用接口测试工具测试,比如 POSTMAN,复杂不,难受不? 今天陈某 ...

  9. 教你50招提升ASP.NET性能(二十六):对于开发人员的数据库性能技巧

    Database Performance Tips for Developers对于开发人员的数据库性能技巧 As a developer you may or may not need to go ...

随机推荐

  1. oracle 10g 恢复dmp文件。

    1. 在winxp下,安装10g,默认选择,一路ok.(安装前自检出现dhcp警告,可直接忽略) 2.命令行,在xp下,输入sqlplus,即可启动,登陆用 sqlplus / as sysdba 用 ...

  2. Index Full Scan vs Index Fast Full Scan-1103

    [Oracle] Index Full Scan vs Index Fast Full Scan作者:汪海 (Wanghai) 日期:14-Aug-2005 出处:http://spaces.msn. ...

  3. 【svn】server建立以及svn使用

    安装好VisualSVN Server后[安装过程看这里],运行VisualSVN Server Manger,下面是启动界面: 好的,下面我来添加一个代码库[Repository],如下图: 按上图 ...

  4. TestNG目录

    1 - 简介  2 - 注解  3 - testng.xml  4 - 执行 TestNG  5 - 测试方法, 测试类 和 测试组    5.1 - 测试方法    5.2 - 测试组    5.3 ...

  5. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  6. Bootstrap_Javascript_弹出框

    HTML: <button type="button" class="btn btn-default" data-container="body ...

  7. Sublime text3 JS语法检测工具安装及使用

    Sublime text3 JS语法检测工具安装及使用 工具/原料 sublime text3 nodejs sublimeLinter sublimeLinter-jshint 方法/步骤 首先ct ...

  8. ie8 background css没有显示?——都是空格惹的祸

    ie8 background css没有显示?——都是空格惹的祸

  9. angular post发送请求和GET发送请求,服务器端接收不到信息的问题

    参数可能因为编码原因,服务器端无法接收到传递的值, 这时需要用到补丁来解决这个问题 1,下载一个http.patch.js文件,放入YII框架中的js/ng文件架内 2angularjs 创建模型部分 ...

  10. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...