• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 新鲜出炉!iOS 11中有哪些值得关注的UI 设计细节?

新鲜出炉!iOS 11中有哪些值得关注的UI 设计细节?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含iOS 11,ui设计,经验分享,苹果界面,苹果系统等相关知识,希望在学习及工作中可以帮助到您

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

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

图标:从线性改为面形

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

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

△ ?iOS 10 App Store

△ ?iOS 11 App Store

△ ?iOS 10 iTunes

卡片式设计

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

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

大投影

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

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

△ ?iPad 的封面是横的

△ ?iPhone 手机端封面(竖)

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

无处不在的圆角

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

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

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

想做出让人亲近的界面?学会用「圆」也许是很大的秘诀。

好了,坐等升级 iOS 11,Are you ready?

早在16年优设就发了多篇预测这类趋势的文章,感兴趣的可以看看:

  • 腾讯ISUX 设计师的预测:《热门好文!从iOS 10设计指南变化看设计的新趋势》
  • 蘑菇街设计师的分析:《热门趋势!从IOS 10 的交互设计中学到的3个设计启示》
  • 首个归纳这个趋势的设计师:《设计新趋势!超越扁平化设计的「化繁为简」有哪些亮点?》

原文地址:shejidaren

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • Facebook 官方出品! iOS 11模板文件,含 PSD/SKETCH 和壁纸
  • 谷歌设计师:如何评价新版 iPhone X 的设计规范?
  • 解析 iOS 11:苹果还像过去一样在意细节吗?
  • 取消了Home键的 iPhone X,交互方式都有哪些变化?
  • 优设首发!iPhone X 官方人机交互指南中文版
  • 最新版iOS 11设计规范发布了,来下载官方源文件!
  • 看了那么多的设计趋势,你知道怎么落地实践吗?
  • 背后的分析!iOS 11的设计理念和3个设计方向总结
  • 高手帮你学规范!iOS和Android规范解析之标签导航和分段控件
  • 我花了五个小时,完成了iOS 11新版App Store的交互探索

相关文章

  • 2017-08-06新手建站入门教程 域名的解析与绑定
  • 2018-08-23从新人到大牛!可能是最全面的交互设计知识体系
  • 2018-08-232017年快结束了,网易高手是怎么做设计年度总结的?
  • 2018-08-23从景观到 AI 产品,这个设计师自己开发了一个「招行版鲁班」!
  • 2018-08-23网易资深设计师:提高工作效率的全方位实战指南
  • 2018-08-23UI 入门基础!像素、分辨率和适配的知识全面总结
  • 2018-08-232017年天猫双11海报全集,为52家品牌创意疯狂打Call!
  • 2017-08-06下拉菜单和滑动菜单设计实例
  • 2018-08-23设计实战案例!谈谈网易严选企业购的交互设计
  • 2017-08-06Web前端开发工程师需要掌握的核心技能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何系统学习功能图标?来看资深设计师的全面总结!
    • 关于表单设计的知识点,这篇总结相当全面!
    • Bootstrap3.0学习笔记之按钮的样式
    • 一个App 闪屏的完整设计过程
    • 腾讯设计师:超实用的数据可视化零基础教程
    • 超10万阅读!腾讯设计师在路边摊的“暖心实践” 
    • 用3个案例,让你学会移动端的长表单设计
    • 如何适配iPhone X?来看QQ 音乐这个实战案例复盘总结
    • 手机端表格设计:我整理了一套循序渐进的处理方法
    • 为了用户!让你的UI更加安全稳妥的5种设计策略

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有