恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计小白到大神的关键能力之一:思维!
0.0°
2020-05-28 原创文章 设计趋势 举报 437 2 1 0

全链设计师有多厉害?

相信大家也感受到了,今年的工作是多么的难找!!甚至前段时间,BOSS直聘都崩了……


据国家统计局数据,全国城镇调查4月份失业率为6%,比3月份上升了0.1个百分点,这个形式之下,不管是刚毕业的设计应届生还是想跳槽的设计师,都太难了……

但越是艰难的时刻,越是考验一个人的真正实力,对于设计师而言,此时自身的竞争力,则代表了你的价值。


互联网行业发展到现在,大家的视觉设计水平普遍都比较高了,影响产品质量的因素除了视觉效果外,更重要的是思维。


互联网进入“下半场”后,你的思维,决定了你的高度。


01 思维先行者:全链设计师


对于什么是全链路设计这个问题其实并没有标准的答案,可以简单理解为,在产品的整个研发流程中,设计师需要用设计思维去解决具体的问题。

在过去,设计师只注重视觉效果;而未来,引入全链路设计后,设计师需要从产品需求环节就参与其中,深入了解产品的背景和目标用户。


然后针对这些内容做深入研究,输出与之匹配的设计方案,并且懂得如何与研发人员沟通,确保完美地实现产品。

所谓的全链路设计能力,实际上是设计师能走出自己舒适圈的能力,以及对所在行业的理解能力。


很多设计师在工作中会感到迷茫,觉得公司对于设计并不怎么重视,又或者觉得自己的意见总是被忽略。深入观察后发现,产生这种问题的原因是大家并没有发挥自己的主观能动性。


拿到产品需求的时候脑海里想的第一件事情是“我应该如何去设计”,而并没有想为什么会有这个需求。

如果跳过了“为什么”,直接走向“怎么做”,那设计师就变成了一个单纯的执行者,设计师的声音、设计师的观点就自然不那么容易被听到。


因此,当说到全链路设计的时候,究竟要懂多少已经不那么重要,重要的是能否突破自己的边界,能否突破岗位的边界。


从专业到行业的转变,从技术到业务的转变,是思维的转变,也是自我的提升。


02 关注全链路设计

想要知道一个岗位需要什么样的人才,最好的办法就是直接去招聘网站看最新的招聘需求是什么。


在“拉勾网”搜索UI设计岗位,可以看到如下图所示的内容。

从图中可以看到,对于UI设计师已经不再是单纯地要求有较强的设计能力和审美能力,而是需要了解行业和整个产品研发流程。


互联网产品的设计不同于其他设计,更强调理性、体验和有源设计,而要做到这一点,仅仅提升自己的视觉设计水平是不够的。


互联网公司的设计师其实是一个既专业又综合的岗位,当我们关注全链路设计的时候,也就已经开始关注如何成为更好的设计师这个问题了。


03 怎么做一个有思想的视觉设计师?


1. 为当下做UI设计


UI设计是跟随互联网的脚步而不断进步的,因此,我们在做设计的时候,必须要关注每一个当下的变化。


扁平风格设计自从iOS7推出以来开始变得非常流行,并且同样是扁平风格,每年也在发生变化。与此同时手机屏幕也在不断变大,且屏幕与屏幕的长宽比种类也在不断变多。

UI设计师在设计界面的时候再也不能想着对每个屏幕尺寸都设计一版界面出来,而是需要考虑界面的自适应问题。


相对于过去的完全扁平设计,最近的扁平设计风格中又融入了更多的细节,比如渐变、投影等。当下的UI设计中,是否有一个设计的基准可供参考?如何判断当前的设计趋势?如何选择产品的设计风格?

2. UI设计风格的变化


2018年6月4日,苹果公司在全球开发者大会上发布了iOS12,在iOS12中可以看到FaceTime支持群组聊天,群视频聊天的界面如图所示。

对于这样的界面,可能很多设计师第一眼看到比较难以接受,这看上去分明就跟没有设计过一样,或者是缺乏所谓的“设计感”。个人将这样的界面定义为“无界面设计”的界面。


实际上,这个界面很好地体现了苹果公司对于UI设计趋势的态度:更加推崇“内容为王”的设计风格,即内容本身就是界面。与此同时内容也更加智能和自动化,比如上图所示的界面中,正在说话的人的头像会自动放大。


微信在之前也做了一个较大的改版,将朋友圈上方的标题栏变为透明的,当用户点击链接进入某个页面时,顶部的标题栏会变成浅灰色。


并且当用户滑动屏幕的时候标题栏还会缩至最小。这样的改变可以让界面内容更加纯净,进一步减少视觉干扰,如图所示。


iOS系统上视觉风格相对比较具有代表性的版本是iOS 6、iOS7和iOS11,分别应用在iPhone4s、iPhone5 和iPhone8/8Plus/X上面。下图所示是苹果公司官网上3个机型的屏幕尺寸对比(iPhone5的屏幕尺寸和iPhoneSE相同,iPhone4s已经停产,信息无法列出,iPhone4s的屏幕尺寸为640px×960px)。



这意味着硬件本身也对设计风格产生了一定的影响。因此,设计师在思考设计风格为什么在变的时候,只需要问一个问题:把过去的设计放在当前是否习惯?答案基本上都是不习惯。


设计风格会变,并非视觉美丑的问题,而是设计需要符合当下的环境。


3. 大标题设计风格


从iOS11以后,iOS系统的UI设计风格与其说是“大标题”设计,更愿意称之为回归初心的设计。现在移动设备的UI设计,不再像以前的UI设计那样讲究“寸土寸金”,大标题设计无处不在。


并且这样的设计最开始并不局限于移动UI本身,而是移动端、平板甚至是桌面网站等都开始采用类似的设计风格,如图所示。


更大的标题,更注重图文的排版,通过文字的对比来表现内容的分组和轻重层级等。


现在的UI设计越来越像是为一本精美的杂志进行排版,这一点在iPad的应用里体现得淋漓尽致。如图所示是苹果公司官方的新闻应用界面。



采用大标题设计风格,一方面是硬件发展的需要,比如现在的手机屏幕越来越大,可展示内容的区域也越来越多;


另外一方面是为了更好地提升页面的可读性,产品的用户可能涵盖各个年龄层,要让这些用户都能清晰阅读产品中的内容就显得格外重要。


4. 卡片设计风格


早期手机屏幕比较小,并不适合使用卡片设计风格。因为卡片本身是有尺寸的,使用卡片设计风格会进一步压缩手机屏幕的可视区域。随着屏幕的增大和屏幕尺寸种类的增多,卡片设计风格的优势逐渐被体现出来,在响应式设计上的体现尤为突出。


卡片设计风格的作用是可以很容易地把阅读者的目光聚焦在某一内容上,并且内容与内容之间的区分非常明确。卡片设计风格和列表设计风格一样,正在被越来越多地应用到各个设计内容上,并已经成为一种非常基础且经典的设计风格。


相对于列表设计,卡片设计本身也可以更方便地通过一些效果来体现当前的状态,如选中的卡片可以在视觉上进行放大,通过投影的改变在视觉上显示不同卡片之间的高度和层级等。


圆角矩形卡片设计给人平易近人的感觉,矩形卡片设计给人更加锐利清晰的感觉,如图所示。此外,卡片配合背景的模糊设计,还可以让用户对内容更加聚焦。


04 三大核心设计理念

从iOS7推出以来,虽然《iOS人机交互设计指南》的内容一直在发生变化,但是其三大核心设计理念一直没有变过,并且不断被强调。这三大核心设计理念是清晰(Clarity)、遵从(Deference)和纵深(Depth)。下面通过一些实例帮助大家理解这三大设计理念。


需要注意的是,虽然这三大核心设计理念是在《iOS 人机交互设计指南》中提出的,但实际上适用于任何平台的设计。


1. 清晰(Clarity)

苹果公司对于“清晰”的表述,将其简单翻译成中文如下:“在整个系统(应用)中,所有尺寸大小的文字都应该清晰可见,图标也应该清晰传达出明确的含义。


而其他设计元素应细腻且恰当,并且应对重点功能进行突出设计。此外,内容间隔、界面颜色、字体、图像和界面元素应巧妙地突出重要内容并传达出交互性。”


对于这段话可以通过以下内容的讲解进一步理解。


确保文字的可读性

①标题和正文应区分明显,行高合适,如图所示。


②标题应言简意赅,每行文本不应过长,避免阅读疲劳,如图所示。


③字体的最小尺寸应为11pt,且正文字体尽量在15pt以上,这样才便于阅读,如图所示。


④保证高对比度,如在浅色背景上使用深色文字,在深色背景上使用浅色文字,如图所示。


图标应清晰传达意图

①图标表达的意思应明确,对于大家约定俗成的图标,尤其是系统的图标复用时,不要改变该图标代表的功能。如心形图标一般表示关注、收藏等,不要把这类图标另作他用,如图所示。


②除非图标意思非常明确,否则图标最好伴随文字一起出现,如图所示。


③一个图标对应一个功能,尽量避免相似的图标在同一产品内出现,如图所示。

    



④导出图标时应导出多个尺寸,以保证图标在所有的设备上都能十分清晰地显示,如图所示。



注重交互性

①对于可交互的地方应有清晰指示,可以通过明确的按钮以及带有颜色的文字或者下划线表示。对于文字的颜色也应该慎重考虑,每个颜色都有其代表的意义,不要使用让用户产生困扰的颜色,比如在删除按钮上使用绿色,如图所示。



②如果是为触控设备设计的界面,应考虑触控区域的大小,防止区域过小产生误触。一般情况下要想避免误触的出现,触控区域应不小于44pt,如图所示。如果有时候视觉需要无法留出这么大的区域,那么触控区域可大于视觉内容区域。



③如果产品有横屏状态,应该考虑界面在横屏模式下的布局。在横屏模式下,最明显的就是顶部的标题栏和底部的Tab菜单栏高度会缩小,并且底部Tab菜单栏图标和文字不是上下排列而是左右排列,如图所示。



2. 遵从(Deference)


关于“遵从”的含义,苹果公司认为:“流畅的交互动效和清晰美观的界面将有助于用户理解内容并明白其交互逻辑。通常内容应充满整个屏幕,并使用半透明和模糊效果提示用户有更多的内容。使用合适的边距、渐变和投影效果,可以让界面清爽并有‘呼吸’空间,但要确保‘内容为王’。”


对于这段话可以通过以下内容的讲解进一步理解。


“内容为王”的设计风格这是该设计理念中最为重要的一点。界面设计的核心应该是思考如何更好地展示内容,关于“内容为王”有以下几点需要注意。


①保持界面简洁,尽量少添加视觉干扰元素,应把注意力更多地放在界面的排版上,如图所示。当然,游戏设计除外。减少视觉元素干扰也并非只是简单地在界面中留白。


比如天气界面(中图)可以把相关的视觉元素放在界面上,增加沉浸感;又比如健康应用界面(右图),可以通过不同的颜色对内容进行区分。




②最大化内容展示区域。如果一屏无法展示完整的内容,用户滑动时内容最好铺满屏幕,而不是让内容只在某个区域内展示,如图所示。



合理使用半透明和模糊效果

从iOS7以后毛玻璃(即半透明和模糊)效果已经非常普及,这实际上是为了更好地突出当前的内容而产生的一种设计风格。在摄影的时候会把焦点放在需要突出的主体上,这时主体是清晰的,而周围非焦点区域则是模糊的,这在人像摄影中尤为明显。


同样,通过半透明和模糊效果可以更好地突出内容本身,因此这一效果往往作为背景效果使用,如图所示。



合理的边距设置

虽然强调“内容为王”,建议最大化展示内容,但是合理的边距设计能更好地帮助用户把目光聚焦在内容上。一般会在屏幕左右两侧留出8pt~16pt的边距,而内容与内容之间的边距也不应低于8pt。


注意,用户看到得越少往往会更注意所看到的内容,因此合理的留白和边距设置是非常重要的,且随着屏幕和分辨率的不断变大,这将变得越来越重要,如图所示。


3. 纵深(Depth)


纵深的设计理念是现代界面设计中非常重要的内容。纵深是指界面内容的层次感,独特合理的页面跳转动效传达出内容的层次结构,使得界面活泼生动、便于理解,并且当用户点击跳转时动效还能加深用户的印象,提供更加沉浸的体验。


纵深是界面设计中的难点,需要结合动效理解,如果把这三大核心设计理念比作幻灯片的制作,前面的两个核心设计理念是关于幻灯片的展示,而这一设计理念则是关于幻灯片的转场,如图所示。



合理的页面跳转动效

注意,这里有两个关键词:合理和跳转。以iOS系统中自带的“日历”App为例,在年、月、日进行切换时使用了缩放动效,可以让用户清晰了解彼此的层级关系,同时这样的动效也很符合逻辑,如图所示。



动效在应用中的使用不应过多,一定要明白使用动效的两个核心目的:一是为用户提供引导,二是减少加载过程中的等待感。


清晰的模态界面

可以把模态界面简单理解为弹框,但又不局限于弹框,凡是在当前页面中弹出的内容都可以理解为模态内容。


在当前页面中弹出内容时,希望用户的注意力集中在弹出的内容上,这时候应该突出弹出的内容,比如可以在页面上增加一层遮罩,如图所示,或者是使用背景模糊等效果。



合理地利用新技术

每次硬件的更新往往都会带来一些新技术,在进行界面设计时也应该考虑到这些内容。比如合理地使用指纹识别来加强页面的统一性,使用3D Touch技术快捷显示内容等,如图所示。



需要注意的是,使用新技术的时候,也一定要考虑到不支持该技术的设备的操作方式。


当下,是一个动态却又相对静态的词,虽然过去十年UI设计风格有了翻天覆地的变化,但是有些本质性的东西却一直没变,比如设计是为了更好地把内容传达给用户。


要做好当下的设计,最重要的是掌握当下的设计理念并将其和自己所负责的产品相结合,打造出能最大程度提升产品价值的界面。


Powered by Froala Editor

更新:2020-05-28

收藏

2人已收藏

数艺设

人民邮电出版社数字艺术分社

  • 491

    作品

  • 1108

    粉丝

  • 0

    关注

  • 分享一个普通插画师,很难Hold住的画法!
  • 为什么现在学Photoshop,也不算晚?
  • 乌江榨菜国风新包装!设计师画了40多稿
  • 你感受过五彩斑斓的孤独吗?这些高饱和度插画里隐藏着生活的力量
相关标签
设计UI

    猜你喜欢

      2020-05-28 原创文章 设计趋势 举报 437 2 1 0

      设计小白到大神的关键能力之一:思维!

      0.0°

      你确定要举报设计小白到大神的关键能力之一:思维!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录