转载自-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. centos相关

    查看虚拟机里的Centos7的IP:ip addr或者ifconfig  ---https://blog.csdn.net/dancheren/article/details/73611878 Cen ...

  2. Linux学习笔记01

    1.Linux不靠扩展名区分文件类型2.存储设备必须先挂载才能使用3.Windows下的程序不能直接在Linux中安装和运行 一.服务器的管理预配置Linux的目录的作用:/bin/存放系统命令的目录 ...

  3. [K/3Cloud]将JSON字符串反序列化为C#动态对象

    using Kingdee.BOS.Util; string errString="{/"Row/":1,/"PageId/":/"1234 ...

  4. Linux中kill,pkill,killall和xkill命令汇总讲解

    终止一个进程或终止一个正在运行的程式,一般是通过 kill .killall.pkill.xkill 等进行.比如一个程式已死掉,但又不能退出,这时就应该考虑应用这些工具. 另 外应用的场合就是在服务 ...

  5. Remove Element(第一种方法参考别人)

    Given an array and a value, remove all instances of that value in place and return the new length. T ...

  6. Google Chrome Developer Tools

    原文:https://www.oschina.net/p/chromedevtools Google发布了Google Chrome Developer Tools,这是一系列面向Chrome开发者的 ...

  7. 获取select 选中的option中自定义的名称的之

    <select style="width: 220px;height: 20px;margin: 0 0 0 20px;" id="invest_ticket&qu ...

  8. jmeter的Classpath即类或者jar包的搜索路径设置

    对于master-slave模式,插件和依赖都需要放到slave上才能生效,并且需要重启slave使插件生效 查看配置文件:apache-jmeter-3.1/bin/jmeter.propertie ...

  9. 用vhd挂载并安装win7且建立分差vhd

    准备:硬盘分区激活第一个分区; imagex.exe; install.wim; winpe boot pc 1.cmd命令下,创建主vhd      (1)diskpart       (打开dis ...

  10. [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

    Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more ...