两年前,苹果为现代的使用者完全改变了设计语言。对于设计者来说,这使得他们更容易关注动画和功能而不是其他的细枝末节。

我已经被问过很多次怎样开始设计或者是有什么捷径可以成为更好的设计师。虽然没有银弹,然而有很多的技巧和规则设计将影响您普遍设计的方式。

即使你设计一个完全不同的平台上,如果您已经了解了在网络上和打印相同的设计观念依然存在,您可以应用相同的技术。iOS是一个平台,设计是回到它的根源。感觉就像一个现代的杂志,有漂亮的文字版式和简单的布局。在这本书中你将学习的东西会有利于你设计最好的产品。

核心理念

iOS是由3个核心理念:尊重、清晰和深度(deference, clarity and depth)。根据这些设计原则,我将用可操作的项目来解释他们更深的含义。

deference

你的内容应该是首要的,其他一切都是次要的。使用元素的补充你的内容,避免视觉分散。

  简化

你的用户界面应该是精简后的核心。每次添加一个元素,问问你自己“这是必要的吗?”。除非你的应用程序是一个游戏或一个特定的主题,会使用沉重的纹理,3 d效果和多个阴影。否则,专注于功能颜色,和谐渐变和漂亮字体。

  最大化内容

内容应该铺满整个屏幕,给最大的空间内的元素。避免多个容器和滚动区域最大化,这将允许更多的互动空间。

Colors

用突出的颜色显示一个可点击元素或是在标签栏上高亮显示。选择正确的颜色和中性色调可以打破你的设计。

  排版是内容

因为简化的用户界面和关注的内容,你的排版会占据屏幕的从50%降至90%。因此,它是至关重要的,选择一个美丽的字体和设置它的重量,行高,颜色在视觉上赏心悦目是最佳的阅读。这个方面在排版部分将更详细地解释。

空闲空间

用空闲空间显示关注的内容。你看到的越少,你越能专注于一些事情。合适的间距提供喘息空间。不要把你的屏幕塞满太多结构或不必要的视觉元素。

  图标状态

导航栏的图标分为两种模式:无填充和填充模式。无填充的原因是减少分心。当一个图标是填充的,会有更多的关注,也意味着界面是活跃的。

clarity

让事情明显。按钮应该不言自明,排版应该足够大并在一个舒适的距离有可读性。你的内容应该清楚地表明你的应用程序是什么。例如,如果这是一个咖啡应用,那么你应该有提醒的咖啡豆,咖啡和棕色的颜色的咖啡。

  使文本具有可读性

在Retina,排版应该11 pt的最小大小。阅读的最佳大小大约是16 pt。

  使用显眼的图标

图标不应该是模棱两可的,他们应该标明符号是什么意思。可能的话,使用文本来配图标。不要重复使用一个图标在不同的地方。同样,不要使用通用的文字如“返回”或“提交”,而是具体的说:“回到家里”或“注册一个新帐户”。

  描述性的屏幕

每个页面应该有清楚的解释。应该有最小的品牌,这个品牌可以用一个清晰的屏幕的标题和标签栏高亮状态来代替。

  颜色的意义

颜色是有意义的,使用红色,绿色,中性色合理暗示了否定,肯定的行为,链接和不活跃的状态。不要随便使用这些颜色以免混淆你的用户。例如,不要使用绿色的按钮来处理“删除这个界面”事件。

  有层次的界面

就我个人而言,我觉得这是iOS最激动人心的的和独特的方面。每一个屏幕转换从一个到另一个地方。主屏幕缩放到一个文件夹,然后缩放到一个应用程序。传统上,这种技术是很难执行,但由于Xcode,他们比以往任何时候都更加容易。在动画部分会详细解释。

  模糊的背景

保持上下文的背景界面不应该保持内容的清晰。模糊的背景不仅让你保持其自然的颜色,但同时也带来了前景。模糊并不是一个发明,它已经存在在现实生活中,当你专注于某事,一切变得模糊。

  让它变得令人愉悦

    指南中提到的3件事可以使你的应用脱颖而出:动画,手势和声音。但是很容易走极端,所以使用要适度。

动画

屏幕动画不仅能过渡到另一个屏幕,增加了设计的趣味性。它也带来了重要的元素。

通过引入iPhone 5的高屏幕,拇指的后退按钮太高很容易达到。因此,尽管不那么明显可见的按钮,一个手势可以延长到交互。这让用户更容易操作。我们需要更少的视觉线索和更有用的功能。

声音

声音是最低限度使用的应用程序,他们可以将一个平凡的任务为一个真正有益的经验。人们甚至可以识别你的应用程序在没有看到它的时候。当声音留下正确的印象,意味着你用最少的努力获得了成功。

三个原则

如果你忽视一切,至少必须考虑这三个重要的规则,iOS设计:考虑到触摸界面,使文本可读性和优化iPhone 5,6和6 +。

  触摸设计

应该很容易触碰按钮。他们之间的大小应该30-60pt宽。最优大小44 pt。在极少数情况下,设置为22 pt的链接文本内部,但谨慎使用,因为他们变得难以利用。文本按钮有触摸区至少30 pt。

  可读性

排版应该11 pt的最小大小。最佳的阅读字体大小大约是16 pt。使用行高120 - 145%的阅读体验更好。

  布局

你现在应该尊重3决议:320 x480pt 375 x667pt和414 x736pt。确保使用额外的空间,和了解你的内容可以根据屏幕大小扩张。

  横屏模式

iPhone 6 +越来越受欢迎,尤其是在中国(大约40%)。应用程序将会出现不同的景观模式,显示一个额外的菜单左边,类似于在iPad上。因此,许多应用程序开始支持横屏模式。

学习ios设计(1)的更多相关文章

  1. 学习iOS设计--iOS8的颜色、文字和布局学习

    在去年,Apple针对新时代用户彻底更新了其设计语言.现在的设计语言相对之前大为简化,能够让设计师将精力集中到动画和功能上,而不是繁复的视觉细节上. 很多人都曾问过我:设计应当如何入门?成为一名优秀设 ...

  2. 【零基础学习iOS开发】【转载】

    原文地址:http://www.cnblogs.com/mjios/archive/2013/04/24/3039357.html 本文目录 一.什么是iOS 二.主流手机操作系统 三.什么是iOS开 ...

  3. 10 个学习iOS开发的最佳网站(转)

    10 个学习iOS开发的最佳网站 作者 jopen 2012-09-26 08:59:56 1) Apple Learning Objective C Objective-C,通常写作ObjC和较少用 ...

  4. 那些在学习iOS开发前就应该知道的事(part 2)

    英文原文:Things I wish I had known before starting iOS development—Part 2 http://www.cocoachina.com/ios/ ...

  5. 从零开始--系统深入学习IOS(使用Swift---带链接)

    这是一篇面向IOS新手的文档.同时提供一些系统知识的链接,让你系统学习IOS.它提供一些信息帮助你采用技术和编程接口来开发苹果软件产品,本人不保证会在将来更新.学习它,需要你掌握一些基本的编程知识 1 ...

  6. 李洪强iOS开发之【零基础学习iOS开发】【01-前言】02-准备

    在上一讲中,介绍了什么是iOS开发.说简单一点,iOS开发,就是开发运行在iPhone或者iPad上的软件.这么一说完,应该有很多人就会产生一些疑惑,比如学习iOS开发是不是一定要买iPhone?需不 ...

  7. 李洪强iOS开发之【零基础学习iOS开发】【01-前言】01-开篇

    从今天开始,我就开始更新[零基础学习iOS开发]这个专题.不管你是否涉足过IT领域,也不管你是理科生还是文科生,只要你对iOS开发感兴趣,都可以来阅读此专题.我尽量以通俗易懂的语言,让每个人都能够看懂 ...

  8. 如何学习ios开发

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:http://www.zhihu.com/question/20264108/answer/3026 ...

  9. 【转】 学习ios(必看经典)牛人40天精通iOS开发的学习方法【2015.12.2

    原文网址:http://bbs.51cto.com/thread-1099956-1.html 亲爱的学员们: 如今,各路开发者为淘一桶金也纷纷转入iOS开发的行列.你心动了吗?想要行动吗?知道如何做 ...

随机推荐

  1. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  2. win8下 web测试 之 hosts绑定

    从这个开始,开启web测试之旅 绑定hosts: 1.在C:\Windows\System32\drivers\etc下找到 hosts 文件 2.将hosts文件复制到一个地方: 3.修改hosts ...

  3. APP设计规范大全

    大图可保存到本地

  4. How to Avoid Producing Legacy Code at the Speed of Typing

    英语不好翻译很烂.英语好的去看原文. About the Author I am a software architect/developer/programmer.I have a rather p ...

  5. SpringMVC(一) —— 入门

    SpringMVC原理图: 步骤: 首先用户发送请求.——>DispatcherServlet,前端控制器收到请求后自己不进行处理,而是委托给其他的解析器进行处理,作为统一访问点,进行全局的流程 ...

  6. c# ListView

    // Attempt to run the file. System.Diagnostics.Process.Start(filename); //folderCol 可以存放一个路径的 栈(用于返回 ...

  7. ie8下的透明 问题

    团队里经常遇到,索性整理一起 是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明和整体透明 先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色. 简单介绍下r ...

  8. 设计师如何为 Android 应用标注尺寸

    http://blog.cutterman.cn/?p=33 1. 画布大小定位 720 x 1280,72 dpi2. 只使用偶数单位的尺寸,比如 96 px 的列表项高度,16 px 的边距,64 ...

  9. Web服务器和动态语言如何交互--CGI&FastCGI&FPM浅谈

    一个用户的Request是如何经过Web服务器(Apache,Nginx,IIS,Light)与后端的动态语言(如PHP等)进行交互并将结果返回给用户的呢? 本文浅谈个人观点,可能有误,欢迎拍砖,共同 ...

  10. Python之路第八天,基础(9)-面向对象(下)

    类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...