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. Boost1.67编译+CMake Generate时遇到的一个错误

    下载的一个库编译时依赖boost,记录一下boost的编译: 下载源码 vs命令行里cd到根目录,运行bootstrap.bat,发现多了几个文件{b2.exe.bjam.exe.project-co ...

  2. 一个openMP编程处理图像的示例

    一个openMP编程处理图像的示例: 从硬盘读入两幅图像,对这两幅图像分别提取特征点,特征点匹配,最后将图像与匹配特征点画出来.理解该例子需要一些图像处理的基本知识,我不在此详细介绍.另外,编译该例需 ...

  3. type="radio"样式修改

    input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; ...

  4. httpclient模拟浏览器

    package com.java.httpclient; import java.io.IOException; import org.apache.http.HttpEntity; import o ...

  5. python tips:生成器的小问题

    在Python中,生成器和函数很像,都是在运行的过程中才会去确定各种变量的值,所以在很多情况下,会导致各种各样的问题. def generator_test1(): # 0...9 generator ...

  6. BZOJ 1601: [Usaco2008 Oct]灌水 最小生成树_超级源点

    Description Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水库. ...

  7. 路飞学城Python-Day101

    57-多表操作之一对多添加纪录 def add(request): # pub = Publish.objects.create(name='人民出版社', email='873245193@qq.c ...

  8. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. log4j 设置日志输出文件的路径

    log4j.rootLogger=debug, A1 #输出到指定目录下 og4j.appender.A1.File=/log.log #输出到tomcat容器下的指定目录 log4j.appende ...

  10. [Linux]第五部分-Linux系统管理员

    启动流程如下:1.加载BIOS信息,读取第一个启动设备代号2.读取第一个启动设备的Mbr引导程序的启动信息3.加载操作系统核心信息4.核心执行init程序并获取运行信息5.init执行 /etc/rc ...