转载自-Apple 官网,感觉不错,记录之 (https://developer.apple.com/design/tips/

Some useful design tips about IOS.

Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points.

Hit Targets

Create controls that measure at least 44 points x 44 points so they can be accurately tapped with a finger.

Formatting Content

Create a layout that fits the screen of an iOS device. Users should see primary content without zooming or scrolling horizontally.

 

Touch Controls

Use UI elements that are designed for touch gestures to make interaction with your app feel easy and natural.

Text Size

Text should be at least 11 points so it's legible at a typical viewing distance without zooming.

Contrast

Make sure there is ample contrast between the font color and the background so text is legible.

Spacing

Don't let text overlap. Improve legibility by increasing line height or letter spacing.

High Resolution

Provide high-resolution versions of all image assets. Images that are not @2x and @3x will appear blurry on the Retina display.

 

Distortion

Always display images at their intended aspect ratio to avoid distortion.

Organization

Create an easy-to-read layout that puts controls close to the content they modify. 

Alignment

Align text, images, and buttons to show users how information is related.

UI Design Do's and Don'ts的更多相关文章

  1. 【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)

    [译]UI设计基础(UI Design Basics)--导航(Navigation)(六)

  2. UI Design & App & Free Icons

    UI Design & App & Free Icons icons8 https://icons8.com https://icons8.com/ouch Ouch可以帮助那些不进行 ...

  3. 【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)

    2.3  自动适配与布局(Adaptivity and Layout) 2.3.1  开发成自动适配(Build In Adaptivity) 用户通常希望在自己的所有设备,各种场景中使用他们喜欢的a ...

  4. 【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)

    2.1 为iOS设计(Design for iOS) iOS体现以下主题: 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突. 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰 ...

  5. Android UI Design

    Ref:直接拿来用!10款实用Android UI工具 Ref:Android UI设计资源 Ref:Android酷炫实用的开源框架(UI框架) Ref:Android UI 组件 Ref:Andr ...

  6. UI design principles

    Master's conclusion: 1. fix a color pattern 2. fix the frames the UI will use 3. fix the subject tha ...

  7. 【译】UI设计基础(UI Design Basics)--启动与停止(Starting and Stopping)(五)

    2.4  启动与停止(Starting and Stopping) 2.4.1  立即启动(Start Instantly) 通常来讲,用户不会花超过两分钟的时候去评价一个新的应用.在这段有限的时间里 ...

  8. 【译】UI设计基础(UI Design Basics)--iOS应用解析(iOS App Anatomy)(三)

    2.1  iOS应用解析(iOS App Anatomy) 几乎所有的iOS应用都会用到UIKit框架中的组件.了解这些基础组件的名称,角色,功能可以帮你在应用界面设计时做出更好的决策. UIKit提 ...

  9. [RN] 05 - Let's start with UI Design

    aws-mobile-react-native-starter 官方的例子,当然要摸一次. 代码要跑起来:aws-samples/aws-mobile-react-native-starter 教程: ...

随机推荐

  1. NOR flash and NAND flash

    (1)读写的基本单位 应用程序对NOR芯片操作以"字"为基本单位.为了方便对大容量NOR闪存的管理,通常将NOR闪存分成大小为128KB或者64KB的逻辑块,有时候块内还分成扇区. ...

  2. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  3. spark streaming 踩过的那些坑

      系统背景 spark streaming + Kafka高级API receiver 目前资源分配(现在系统比较稳定的资源分配),独立集群 --driver-memory 50G   --exec ...

  4. CentOS 6.4 下用ntfs-3g挂载Windows NTFS分区

    默认情况下,CentOS 6.4不支持Widows NTFS硬盘分区读写,要想把NTFS格式的磁盘挂载到CentOS 6.4下面 需要安装第三方的插件ntfs-3g,这里我们采用编译安装插件. 1.安 ...

  5. Being a Good Boy in Spring Festival 博弈论 Nim博弈

    易游戏雷火盘古校园招聘开始! kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/10000 K (Ja ...

  6. Google Protocol Buffer 的使用(二)

    一.protobuf应用场景 protobuf 在Java中的应用场景可以是序列化和反序列化,流可以通过文件或者通过网络TCP/UDP等方式传输.新建一个.proto文件 syntax = " ...

  7. [bzoj4278][ONTAK2015]Tasowanie_后缀数组_贪心

    Tasowanie bzoj-4278 ONTAK-2015 题目大意:给定两个字符串,求两个字符串二路归并之后生成的字典序最小的字符串是什么. 注释:$1\le len_1,len_2\le 2\c ...

  8. CCCC2017大区赛补完

    L2-2 多项式除法 这题看懂题意就是个模拟 L3-2 周游世界 想法是相邻点连边,然后跑最短路,当最短路相同时候,比较之前经过的换乘数,取最小的作为方案 但是这样只过了2个点……? 网上dalao们 ...

  9. 【SQL Server 学习系列】-- 随机生成日期时间的SQL脚本

    DECLARE @dt1 DATETIME,@dt2 DATETIME,@a BIGINT,@b BIGINT SET @dt1='2010-01-01'--开始日期 SET @dt2='2010-0 ...

  10. CSS3的animation功能

    旋转动画 <img src="https://facebook.github.io/react/img/logo.svg" class="App-logo" ...