当前位置:首页 >  站长 >  建站经验 >  正文

谈谈iOS 11设计中的几个UI设计细节

 2017-08-31 14:59  来源: 设计达人   我来投稿 撤稿纠错

  域名预订/竞价,好“米”不错过

今天从 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 的扁平化,就是一块方形。

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
ui细节优化

相关文章

  • 提升UI细节和体验的10个常用方法

    如果你觉得你的UI设计起来很无聊,想让它看起来更加有趣,其实是有很多相对通用的方法。这些方法大都不算复杂,稍加调整,总会有不俗的效果。如果你想试试,不妨试试我所总结的这些赋予UI以个性的10个方式。

  • 网页UI设计切忌忽视细节 莫让用户审美疲劳

    前言随着网站的普及,如今构建一个网站已不再是一件难事,如果熟练的话,可能只要十几分钟。找一个开源建站程序,套一套模板就是一个有模有样的网站了。而这一便利的建站方式同时也导致了如今很多网站的ui设计都如同一个模子刻出来的。虽然网站的外观对于站点的运营优

    标签:
    ui细节优化
  • 模板引擎的再度优化:Juicer

    前端模板引擎因其代码可读性强和易于维护性深得站长喜爱。市面上的模板引擎很多,如:Mustache,jQuerytmpl,Kissytemplate,ejs,doT,nTenjin,etc.等。随着技术的进步,这些模板引擎越来越切合用户的体验要求了。目前,又有了新模板Juicer,既然是新模板,说明其

    标签:
    ui细节优化

热门排行

信息推荐