腾讯ISUX→UI设计师急需掌握的平面设计基础

标签: Photoshop UI UX 设计教程 | 发表时间:2017-02-07 03:43 | 作者:jackchen
分享到:
出处:http://www.jackchen.cn/blog

UI设计师急需掌握的平面设计基础
曾看到网上一些帖子讨论UI设计师和平面设计师的差异,总结为思维方式的不同: UI设计师考虑用户习惯和易用体验,平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集,信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物,而UI设计是如何让用户更好使用一个事物,表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”,然而许多UI设计师往往缺少平面设计最基本的意识。

常见的平面设计基础问题

平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI设计在视觉化界面操作的阶段,与平面设计的交集是如何组织和处理每个界面的信息。平面设计中俗称的排版,把文字、表格、图形、图片等进行合理的排列调整,有效传达信息,并达到美观的视觉效果。

1. 如何组织信息

组织页面信息的首要任务是判断信息优先级,分清重要信息与次要信息,删除无用信息。化繁为简,降低视觉干扰。举个小例子,从一份简历,就可对一名应聘UI设计师的平面设计基础能力略知一二。首先对无用信息的判断(讲真,曾看到简历中还有体重信息)。其次是关键信息的组织排列、清晰表达。个人信息:姓名、年龄、照片、联系方式;基本信息:工作经历、教育背景、职业技能;其他信息:兴趣爱好等。数份简历扎堆时,信息有效快速传达是第一步,再者才是加入一点点自己的小个性。
063533-53060

2. 如何对齐

日常工作中,经常会遇到有关如何对齐问题的PK,始终争论不休各说各理。首先达成信息优先级主次的共识,可以提升排版的效率。

a. 信息分组

先从一个酒店预定成功通知消息案例来看,通知信息文字平铺直叙,并未合理分组(左图)。图片部分上方酒店评价、信息地址和电话操作按钮剧中对齐,酒店名成为了一个小标题。做适当调整后(右图),使得正文通知、价格和时间字段分组明确。电话按钮同酒店信息组对齐,使得图片区域的文字和操作信息更为整体。
071117-88868

b. 居中对齐or左对齐

信息分组后,居中排列每组信息的小标题,模块感增强,使得阅读标题和每个组信息中产生视线的跳跃。小标题和每组信息统一居左对齐,更符合快速浏览和操作。比如在需要完成注册任务的网页中,标题居左更有利于视线快速向下流动,使得操作路径更顺畅。 071757-57621

3. 如何有重点

a. 大小对比

前面谈了如何组织信息,那如何使主要信息更为有重点?首先可以通过拉开大小比例,拿一张活动海报来举例。5米处能看到什么?海报的大图案渲染气氛的整体感受;3米处能看到什么?活动主标题;1米近距离又能发现什么?具体信息和时间等。拉开主次信息的尺寸大小对比,从空间距离上,使得观众接受信息传达有了先后。观众近距离阅读,信息有效传达的顺序同理适用。
071856-6453

b. 并非均分

看似没有什么差错的信息布局(左图),为什么始终差了一些什么?由于细节之处并非理解信息主次。最初设计稿追求绝对的均分,导致信息较散,没有“组”的紧凑感。
072712-49023

页面元素中的左右间隔往往也会被忽视,如(左图)中帐号头像与页面的左边距=帐号名称之间间隔,使得页面中间区域的信息散于页面边界。标题和发布时间也是通过设计软件的居中对齐功能快速对齐,具有平面设计意识的排版不仅是设计软件中的文本框绝对居中对齐,需要对信息分组与主次深入思考,避免机械的均分对齐。
073506-85390

UI设计中对平面基础能力的检验

UI设计(User Interface界面设计)的设计原则:简易性、一致性、用户习惯、人性化等。遵循UI设计的设计原则,提高平面设计能力,可使得界面更为优雅。在UI设计中可对设计师的平面基础能力迅速检验,下面通过一些具体case的设计过程来简单分析。

1. 精简与一致性

在手Q公众号图文消息优化中,我们发现线上旧的图文消息边距较为肥厚,在大图+1小图的情况下由于代码的模块化拼接,始终无法达到完美的像素间距。在考虑多种纯文字、单图、多图文模版拼接后,尽量减少间距规则和字号种类,达到拼接模版的统一规则。保证一致性为前提,也提供灵活拼接的多样性。
073126-16291

大图+1的情况下,定义1条小图的上下间距相等等于一个单位,而不是单个模块中小图距离上方的1/2单位,在+n小图的时候使得两个小图之间的间距相加后等于一个单位(见下图)。这个小小的视觉细节在和技术同学耐心联调后是可以完美实现的。
081211-23333

2. 操作的轻量化

在某电台app概念设计中,分享功能支持获取歌词并同时拉取专辑封面配图,允许用户上传照片、写下当时的心情或是用语音表达。最初设计时的界面交互框架(左图)默认功能在“写下心情”,“加图片”和“录语音”的功能重要性并列,感受上是个功能强大的分享界面,告诉用户你有三种选择配心情内容的方式。讨论后优化框架(右图),默认拉取专辑封面图,支持上传图片入口置于右上角,默认歌词展示在封面图上可点击编辑,整个页面可视化了最终分享出去的样式,所见即所得。设计优化后,让整个操作有了重点。可以直接在分享预览图上操作,缩短了分享路径,最重要带给用户轻量化的操作感受。
075810-26981

平面设计灵感注入UI设计

好的UI设计可以让软件变得有个性和品位,同时操作上是简单舒适的。平面设计的灵感,往往可以使得界面设计跳出线框与控件的束缚,充分体现软件的定位和特点,使用过程中变得更有趣味。

1. 更具吸引力的点击

关注一个账号、小站的通常app的做法是:头像加关注按钮。在 V 的频道界面中,点击头像即关注,按下后头像成为星形遮罩,表示已关注,点击操作反馈超乎预期又在情理之中。
080007-5760

2. 更优雅的操作

在手机app上后期处理一张照片时,通常是操作区域和照片分开。Black 的处理照片主界面的操作有趣而直观,再调整曲线或加暗角操作都在图片层上,整个界面的导航也突破了传统控件模块,使得整个app在直观又易操作的基础上,彰显独特的态度和个性。
080119-26795

小结

提升平面设计基础能力,在生活中有意识的观察设计、思考分析、养成视觉洁癖。逛商场,导视系统是否能起到不迷失目的地的作用;地铁广告,重点信息是否能瞬间吸引过客的注意力; POS机打出的各种小票,怎么在方寸之地合理安排信息;阅读电子书,字号行距是否适合长时间阅读。如果自己设计将会做出怎样的改变。
身边有许多传统平面设计师,苦恼于怎么转行做UI设计师(或许国内互联网行业平均薪水高些),初级UI设计师往往忽视平面设计最基础能力。传统平面设计是提高用户审美水平的担当;UI设计师肩负着让用户更轻松学会智慧生活的重任。用心思考设计,并无跨界一说。

原文地址: 腾讯ISUX

相关 [腾讯 isux ui] 推荐:

腾讯ISUX→UI设计师急需掌握的平面设计基础

- - Jackchen Design 1984
曾看到网上一些帖子讨论UI设计师和平面设计师的差异,总结为思维方式的不同: UI设计师考虑用户习惯和易用体验,平面设计师专注于更具吸引力的信息传达. 两者侧重不同但专业上有非常大的交集,信息传达的核心基础技能其实都是相通的. 平面设计是如何表达一个事物,而UI设计是如何让用户更好使用一个事物,表达层面令人费解则卡在了使用的第一步.

UI框架选型

- - ITeye博客
  最近公司的一个新项目要进行UI框架的选型,我把选型的思路和过程跟大家分享一下.   在选型之前,我们先要定一下选型的标准,就像人生一样,想清楚“自己要的是什么”是最重要的.   选型的标准分为几部分:. 业务是根本,和大部分的技术一样,框架没有好坏之分,只有适合与不适合.         我们项目是一个通讯类的监控项目,用户群是移动、电信等运营商的运维人员,系统的特点是:.

[转] jQuery ui框架

- - CSDN博客Web前端推荐文章
   jQuery ui框架很多,除了官方提供的 jquery UI(如果你还不知道什么是 jQuery UI,请看 下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于 jquery核心类库实现的ui框架.

Metro UI 平板概念图

- 冉波 - 爱范儿 · Beats of Bits
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同. iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.

Patrick Baudisch: 德國 UI 之神

- tan - 所有文章 - UCD大社区
我曾經為文撰寫過 “日本 UI 之神 – Takeo Igarashi“, 出自於我個人對於 Takeo 的研究的敬佩以及喜愛. 如今,當我投入了 HCI (Human-Computer-Interaction) 研究之後,有一位超新星大師的研究讓我非常喜愛. 如同 Takeo 也是一個非常帥氣的研究員,然而不同於 Takeo 的圖學以及 GUI 雙跨 (近年來 Takeo 更加神猛了, 變成了圖學, GUI, HRI 三跨了),Patrick 的研究自始自終都在 HCI 領域.

开源Python UI框架:Kivy

- xin - 秀码趣 - ShowMuch.com
Kivy是一个可用以快速创建新颖用户界面应用的开源Python库,比如可以用它来创建多点触摸的应用程序,它具备跨平台特性,目前发行有Windows、MacOS、Linux以及Android版本. 作为一个开源框架,Kivy具备以下特性:A.百分百免费使用;B.基于 LGPL3协议 开源,对商业化应用友好;C.跨平台,支持Windows、MacOS、Linux以及Android;D.允许在不同的平台上运行同一套代码;E.稳定以及有完善的API文档;F.通过OpenGL ES 2.0对硬件进行加速;G.自然支持大部分的输入协议或者输入设备;H.基于Python的简单API……等等.

Metro UI 平板概念图

- 可乐加糖 - 互联网的那点事...
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同. iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.

Google:白雪皑皑新UI

- lili - 爱范儿 · Beats of Bits
一项旨在保持产品外观统一性的革新正在 Goolge 的旗舰产品间推行,Google + 的 UI 风格被照搬到各个产品里. 如果说 G+ 的 UI 留给我的印象是简洁的话,那么一票产品从简给我感觉就只能是苍白了. Google Reader 是我这边最先受到影响的产品. 前 Google Reader 产品经理  Brian Shih 对此的一些说法很有代表性:.

Android的UI布局总览

- - 博客园_首页
                  android布局的目的是为了实现不同屏幕比例适配而设计的,有五种布局类:FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout. 五大布局类的继承关系如下(以FrameLayout为例):.

新工具介绍:AdPlus UI

- - CSDN博客推荐文章
通过一段时间,我开发了一款实用新工具,封装了微软的调试利器Adplus.exe让各位更易于使用它. 张佩(Moore.Zhang) . Adplus UI是对Adplus.exe的封装,后者是微软提供的调试工具,是个利器,但虽为利器却少有人用,原因在于它仅支持命令行的方式运作,而命令又稍嫌复杂. Adplus UI的功德就在于把不友好的命令行变成用户友好的界面形式,用户只需要鼠标点几下就可以完成设置,设置会被保存,以后直接使用即可.