Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心、Siri、Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面。

在 iOS 11 的新 UI 界面中,重大更新的界面主要有 App Store,所以我从应用商店的UI设计也能看出一些大概细节。

图标:从线性改为面形

新版 Store 的图标从线性改为面形,图标也加入了圆角,看起来更加圆滑,同时和 iOS 10中的 iTunes 相关应用风格也统一了。

Icon 颜色比如来的线性浅了一点,这样做看起来就不会过重,所以大家在使用面形的图标设计时,颜色要把握好。

卡片式设计

在新版的 iOS 11 界面,有不少的地方采用了卡片式/宫格式排列,卡片式的设计非常适合图文排版,并且在手机端有不错的阅读体验。

在 Material Design 中也是很重视卡片式设计,所以日后可以多考虑使用卡片式风格。

大投影

当转为卡片式设计后,为了提升层级表现,界面也增加了大块投影,是不是和 Material 风格有点像?

小编细看了下, APP 在 iPad 的封面与手机端的尺寸不一样,一个是横,一个是竖(工作量又增加了……)

为了美观,而增加了人力成本,到底值不值?这个封面就像一个网站的文章封面图一样,一篇文章要做2张封面图,这不仅增加人力成本,还增加运维成本。

无处不在的圆角

圆,像曲线一样,有圆滑、活泼、动感、柔和的感觉,更容易让人亲近。亲和力有了,吸引用户就更多了,iOS 的圆角在不同 UI 上使用的圆角大小略有不同,这就是细节,看来 iOS 在圆角的运用已到了出神入化之境。

Material Design 虽然也存在圆角,但要么圆角在太小了,要么就是直角。

而 Windows 的扁平化,就是一块方形。

转载请注明:本文来自常州开发APP公司http://www.czwew.com紫竹云科技!

iOS 11 APP 设计中的几个 UI 设计细节的更多相关文章

  1. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  2. 在APP开发中,如何优雅的设计APP页面

    1.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档.可以看到页面设计是处于整个流程的后期, ...

  3. 一起来给iOS 11找bug: 苹果还是乔布斯时代的细节控吗?

    众所周知,前几天苹果在位于苹果公园的Steve Jobs剧院召开了一年一度的新品发布会,正式揭幕了全屏的iPhoneX, 随后又把iOS 11推送给了测试员(Beta Tester)(正式版将于几周后 ...

  4. ui设计未来前景怎么样?ui设计这个行业怎么样?

    千锋UI设计师培训不仅有正常的培训课程,还为学员提供了UI+产品经理周末提升班,目的是为了给那些有基础的UI设计师提高能力.今天要为大家说的是一位千锋UI设计师的故事. 大家好,我是千锋UI设计培训部 ...

  5. UI设计的分类

    软件UI设计(界面设计包括硬件界面设计和软件界面设计,我们这里探讨的是软件界面设计)包括用户研究.交互设计.与界面设计三部分.   1,用户研究 我们再产品开发的前期,通过调查研究,了解用户的工作性质 ...

  6. [译] iOS 11.4.1 Beta:全新的USB限制模式

    (Source/原文链接 https://blog.elcomsoft.com/2018/06/ios-11-4-1-beta-usb-restricted-mode-has-arrived/) 作者 ...

  7. 最意想不到的5个APP UI 设计范例

    现如今,智能手机已成为人们生活中不可或缺的一个物件,琳琅满目的手机APP充斥着各大应用市场.对于普通人来说,他们的衣食住行因此而变得简单方便:对设计师们来说,他们则面临更多的机遇和挑战.每位设计师都梦 ...

  8. 零基础入门学习UI设计指南

    第一步:认识设计启蒙必备知识 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来. ...

  9. UI设计小白怎样学才能快速入门?

    最近有很多同学问我,UI小白有什么捷径可以快速入门?其实我想说设计这门学科没有什么捷径,真的只有多学.多看.多练.多想.多做. 1.先学软件 如果你是小白,软件也不会用,那就先学软件,从PS开始,先看 ...

随机推荐

  1. 时空上下文视觉跟踪(STC)

    论文的关键点是对时空上下文(Spatio-Temporal Context)信息的利用.主要思想是通过贝叶斯框架对要跟踪的目标和它的局部上下文区域的时空关系进行建模,得到目标和其周围区域低级特征的统计 ...

  2. (转)Bootstrap3 概述

    http://blog.csdn.net/duruiqi_fx/article/details/53285607 注意:HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS ...

  3. IOS Html富文本渲染方式:DTCoreText、WKWebView、UIWebView的内存占用对比

    在app的内容页(详情页)中,富文本的显示一直是经常需要处理的问题,而通常在后端的富文本编辑中,Html应用比较普遍,所以其实需要处理的Html富文本显示的问题,以下这三种方式肯定不是最优的显示Htm ...

  4. vc++创建Win32 Application窗体过程

    #include<windows.h>#include<stdio.h>LRESULT CALLBACK WinSunProc( HWND hwnd, UINT uMsg, W ...

  5. 「BZOJ3339」Rmq Problem(5366)

    题目描述 输入 输出 样例输入 7 5 0 2 1 0 1 3 2 1 3 2 3 1 4 3 6 2 7 提示 这个题说来也挺有意思的 当时集训的时候遇到了一道类似的题,但是题意与此不同,我太菜了, ...

  6. 小白学习Spark系列六:Spark调参优化

    前几节介绍了下常用的函数和常踩的坑以及如何打包程序,现在来说下如何调参优化.当我们开发完一个项目,测试完成后,就要提交到服务器上运行,但运行不稳定,老是抛出如下异常,这就很纳闷了呀,明明测试上没问题, ...

  7. python类的内置attr属性

    class Foo: x=1 def __init__(self,y): self.y=y def __getattr__(self, item): print('----> from geta ...

  8. 漫谈 Google 的 Native Client 技术(一)---- 历史动力篇(Web 本地计算发展史)

    转自:http://hzx5.blog.163.com/blog/static/40744388201172522313463/ 漫谈 Google 的 Native Client 技术(一)---- ...

  9. vue组件通信,点击传值,动态传值(父传子,子传父)

    转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...

  10. Windows使用docker打开新窗口error解决办法

    环境 win7 Error: error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.26/containers/json ...