关于iOS 应用 UI 设计方面有哪些书籍推荐 谈谈iOS 11 设计中的几个 UI 设计细节

作者&投稿:阮狮 (若有异议请与网页底部的电邮联系)
第一本:《Photoshop智能手机APP界面设计》

概要:《Photoshop智能手机APP界面设计》讲解三大智能手机(Android、iOS和Windows Phone)APP用户界面(UI)的设计思路和制作过程。全书分为3章,第1章介绍了APP用户界面基础,包括什么是UI设计、手机UI与平面UI的区别和UI设计工具等基本概念和思路;第2章介绍用Photoshop制作各种智能手机UI常用元素,包括常用图形、控件、启动图标以及图片特殊处理等;第3章则是3大类型UI设计的实战练习,同时分析了各手机平台UI的设计思路。
第二本:《iOS App界面设计创意与实践》
在移动开发领域,也许每个App的用途都有所不同,不过它们都一定是源自于同一个开始,那就是一个最初的创意。这个创意可以来自于任何人——设计师或者开发者,营销经理或者CEO。《iOS App界面设计创意与实践》的意义就在于向读者介绍如何把创意变成真实的App。 《iOS App界面设计创意与实践》包括iOS入门、iOS用户界面基� ⑸杓苅OS自定义用户界面对象、向UI添加动画、通过手势进行人机交互等5个部分。
第三本:《移动应用UI设计模式(简易的UI模式参考书)》
移动应用UI设计模式》是一本移动应用UI设计模式参考书,分10大类介绍了70个移动应用设计模式(包括反模式),用400多个屏幕截图和图解帮助读者理解和利用UI设计模式,以解决常见的设计难题,同时提供了“即学即用”式的技巧和经验。 《移动应用UI设计模式》适合移动应用开发人员、UI设计师阅读。
第四本:《移动Web实现指南——面向移动设备的网站优化、开发和设计》
从移动网站项目最早的创意和发现阶段,到最后的可用性分析,《移动Web实现指南——面向移动设备的网站优化、开发和设计》引导读者使用一种非常全局的方法来思考网站的移动化设计。全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的。更重要地,《移动Web实现指南——面向移动设备的网站优化、开发和设计》还将带领读者思考如何偱序渐进地对网站进行移动化改造。 最后,《移动Web实现指南——面向移动设备的网站优化、开发和设计》还提供一些实例,使读者能够将本书的知识应用于一个现有的网站,以提供更多学习和动手的机会。

第五本:《触动人心——设计优秀的iPhone应用》
本书是《Tapworthy: Designing Great iPhone Apps》的中文翻译版。 可能你设计网站产品或软件界面早已得心应手,可是遇到了iPhone,却感觉无从下手。 无论你是产品经理、设计师、创业者还是程序员,本书都能告诉你如何从iPhone的角度来思考应用设计。本书能帮助你理解如何设计iPhone应用,要创建一款触动人心的应用,需要如何去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计…

第六本:《认知与设计:理解UI设计准则》
[美]Jeff Johnson 著  人民邮电出版社《认知与设计:理解UI设计准则》语言清晰明了,将设计准则与其核心的认知学和感知科学高度统一起来,使得设计准则更容易地在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面,为交互系统设计提供了支持工程方法。不仅如此,这也是一本人类行为原理的入门书。 《认知与设计:理解UI设计准则》不仅适合需要应用用户界面和交互设计准则的软件开发人员阅读,也是软件开发管理者的最佳选择。
第七本:《UI进化论——移动设备人机交互界面设计》
本书内容涵盖交互设计与界面设计的基本概念、设计规范和工作流程。由于这是一本以实际工作案例和工作经验为主的书,一开始着力介绍目前最新发展的交互手段和使用场所,当然是以移动手持设备为主。作为设计师,一定要关心如何将这些创意产品化。接下来介绍如何正确地将一个设计想法变成产品。产品化的过程中,用户体验设计是相当重要的,由于UCD设计思想的广泛使用,本书重点研究并分析用户体验设计的可行性和方法。

iOS 有哪些 UI 交互比较优秀的软件~

  之前iPhone 走的拟真路线,到最近开始流行Flat Design。

  简约优雅的设计让使用者更有舒适的感觉!

  推荐几个我觉得很棒的设计:

  1. Portuguese Airport

  非常简单优雅,而且有强烈的使用者体验在里面。让使用者第一次用就会上手喔!

  2. Journeys

  整体设计光源由上到下,由右到左,并且加上非常简洁的功能。 相当简约。

  3. 新闻摘要(这是我自己写的啦XD)这个是中文版的Summly,抓取中文新闻以後把重点标起来!

  首页,点击以後会有动画把中间的Bar渐渐移上去

  内容页 - 重点会标起来XDD

  好啦这个好像很自肥~~不过我是觉得我设计的还不错

  4. 30/30 是一个专门帮你记录每一件事情的时间,这样可以有效让忙碌的你省更多时间!

  这种设计在UX上面有很大的不同,相较於一般的计时器。大家可以去找找看

  大家可以分享啊~~~

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统内核、锁屏等多方面都进行了不同程度的改进。小编第一时间为大家整理好了iOS 11优秀 UI Kit的下载资源,并且与大家谈一谈UI Kit背后的iOS 11的新变化。
1、 iOS 11 UI 的新变化
在准备着手设计前,首先我们来梳理一下iOS 11 的设计理念。在iOS系统的长期发展中,随着功能和界面的不断丰富,整个系统日趋复杂,App内部的功能架构也有同样的情况。因此,Apple设计团队在新系统中强调了“指引”这一设计思维,并充分地把这一设计思维贯彻到了iOS 11的方方面面。
此外,我们再来看看苹果设计团队的设计原则:
•内容凸显的第一原则
•UI元素不与内容竞争,除非是帮助用户去理解潜在功能的作用
在这样的设计思维和原则的基础上,我们从以下几个角度进行分析。
(1)粗体标题导航栏
扁平化设计中,文字排版影响着信息层级的展示的清晰与否,通过文本的字号、字重、颜色等的对比去建立清晰的信息层级,而不用太多的装饰元素。iOS 11中最让你印象深刻的莫过于粗体大标题栏的变化。
如果你想要打造顶层是标签栏结构的APP,这种设计规范就会非常适合,使用粗体大标题能够让用户在大量的标签切换中快速地意识到自己目前所处在的位置;

尤其是对于内容丰富的APP,大量的页面和各种深度的结构层次,在使用大标题后,相信可以起到很好的页面引导作用。

但是我们看到的是,时钟这项系统应用仍然保持了原有的字体排版模式,其原因在于这项应用在内容和功能上互相平行独立,非常容易分辨,如果在每项的界面继续采用大标题,UI元素会潜在对内容造成了竞争,从而违背了基本设计规则。相应的如果是内容和布局类似的APP的话,粗体标题就会起到很好的指示作用。

(2)提升设计层次
“层次(层次)”是UI很重要的元素,让重要的,不重要的东西区隔开来,引导使用者的阅读动线。清晰的层次可以减轻用户的阅读负担,降低信息寻找的脑力消耗,从而让主次关系更加协调统一。
• 卡片式和投影
在新版的iOS 11界面中,不少地方采用了卡片式或是宫格式的排列模式,视觉上一致,也易于设计上的迭代。这种主要适用于流量分发的渠道型页面,能够结构层次清晰地展示图文的层级关系,起到规整图文内容的作用;
伴随卡片式的内容一起出现的还有投影的大量使用,令设计元素更加独立醒目,极好的抓住用户的注意力。

• 界面布局中的留白
iOS 11的大标题文本中都包含一组带有图片和描述的元素,组元素和组元素之间保持较大的间距。这样的话,设计元素和元素之间保持足够的间距,可以减少用来区分层级关系的不必要装饰元素。

• 颜色/字号/字重
iOS 11中也大量使用了颜色深浅、字号大小和文本粗细来展示标签的不同层次,我们可以看到照片APP在iOS 10中章节标题和照片对比不明显,在更新后,章节标题主标题字体变大加粗,副标题字体变大,颜色变为了灰色,整体层次得到了提升。

(3)圆角图标
iOS 11中的大量的图标由2px线性改为了面型,从线框状态变得更加圆润,亲和力。总体来说边角更圆润,空心变为实心,色快感变重,使iOS的视觉更加轻快、柔和。
系统图标中,状态栏讯号强度从•••••改回阶梯式,电量图标的线面比例变得更均衡一些,标签栏图标从空心/实心两态变成全实心粗线条设计,配合整体设计调性。

2、原型设计
在使用Sketch设计完基于iOS 11系统的静态视觉稿后,想要对设计稿进行进一步的交互设计和团队协作的话,推荐在Sketch中安装Mockplus插件,结合Mockplus就可以轻松将Sketch中完成的设计稿转变成可交互原型,从而在Mockplus中进行快速原型设计,并且与团队成员进行协作和批注。

下载地址:https://www.mockplus.cn/download
3、iOS 11 UI Kit资源集锦
(1)Apple官方下载地址(PS、Sketch):
https://developer.apple.com/design/resources/#ios-apps


(2)iOS Design Kit下载:
https://www.iosdesignkit.io/ios11-gui/


(3)UI 8 下载:

https://ui8.net/products/sparks-ios-11-ui-kit

(4)Sketch APP Source下载:
https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html

(5)Applypixels下载:

https://applypixels.com/template/ios-11-ui-kit/

相信有了这些资源和工具后,大家能够快速地做出适配iOS 11的APP视觉稿和原型,关于更多详细的设计规范和资源,大家可以参考苹果官方的人机交互指南:
苹果人机交互指南
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
iPhone X适配指南
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/