UI设计显得更简约的小技巧

  互联网界一直在有提倡简约设计的声音,可简约设计有什么小技巧?

  谈简约设计的书籍有很多,互联网界也一直在有提倡简约设计的声音。有人说,看国内的各大门户的设计,通通都是文字和功能的粗暴堆砌,难道中国人真的不擅长设计简约吗。

  产品长什么样是跟产品的受众有关的。我们看国内电视购物,从来都是以“有多少功能”的方向来推销产品的。或许我们的目标受众就是喜欢大而全的东西,并不是设计师和产品经理的错。为了迎合大环境的产品需求,我们不得不用各种可有可无的功能点来吸引用户。


  臃肿易烦腻,简陋生欲望

  产品功能多并不是好事,臃肿的功能会让产品本身的定位和识别度变得稀疏,同时带来的是在视觉和心理上的压力。也会让产品显得没有深度,感觉像是一下子就略过了前戏进入高潮了。初期的版本,只要保证那些能让产品的概念成立的关键功能点和特性就行了。

  不过,如果产品太过简陋,仅仅局限于有限的使用场景的话,用户的使用频度就会很低,很容易被遗忘。这也是大多数旅行网站和 App 的痛处。

  每次在斟酌功能点时,大概都会有这样的困扰。

   能让产品“看起来简约”的简单技巧

  我并不认为国外的 App 在功能上会比国内的要少。在实现同样的功能的情况下,国内的 App 设计并没有有意识地让界面看起来更简约。

  产品设计的简约,最直观的感受就是 UI 设计了。在这里分享一些我认为可以让 App “看起来”更简约的几个重要的技巧

   抑扬


  美团网-抑扬

  抑扬,就是对内容进行有抑有扬的对比处理,通过对比的手法能够让信息量在视觉上“显得”比实际上少。

  错落有致、有强有弱的信息布局,让用户更容易地第一眼就把握了整体结构,从而快速找到自己想要的信息。就如同报纸的头条、各种大小标题一样。这些变化让人们的阅读更顺畅。想象一下如果报纸的内容全是大小一样的字体,恐怕没人会有阅读的欲望吧。

  从运营的角度来看,通过对内容的强弱处理,还可以达到对用户的焦点进行引导的作用。比如有些网站故意把分享的按钮做的比其他按钮要大,位置更显眼,就是有意识地想让用户多进行分享,让内容更好地被传播。

  抑扬可以是界面元素的大小、颜色、字体等等,能起到以下作用:

  让界面看起来更简约;

  对用户行为进行引导;

  帮助用户快速发现对他最重要的信息;

  强弱对比,减少阅读的压力感。

  留白


  亚马逊-留白

  UI 设计中重要的要素之一就是留白的运用。文字、按钮等元素周围的留白越大,越能提升存在感。(这其实也是上面说的“对比”的一种变形)

  留白不意味着页面的信息容量降低。

  智能手机上下滚动是很舒适的,并没有必要为了让所有内容在一个页面内全展现出来而让字号变小。这样做反而会让信息更加难以阅读。

  用户的视觉需要得到“喘息”。

  信息容量大的界面,对用户来说是一种阅读负担。在设计这些交互界面时,要注意留白的运用。留白能让界面富有层次感,让用户的视觉得到“喘息”。

  icon 也要尽量简单


  简单的 icon

  设计师通常都是在大屏幕下设计,而实际上有些细节在大屏幕上的表现和实际在手机上的表现会有意想不到的差异。

  有些 icon 放大来看是很精美的,但放到手机上看时总会觉得哪里有些不妥,感觉细节多了挤成一坨,适得其反。这时候可以试试把icon进行极端的简化,再和原来的设计作对比,并进行细微的调整,会有意想不到的效果。

  每个人对简单的理解可能会不一样,但这样几次来回对 icon 反复打磨,对简单化的努力就可以看出效果来了。

  更多

  《写给大家看的设计书》中提到的四个设计的原则:

  对比

  对齐

  重复

  亲密性

  这几个原则可以用来作为任何一个平面设计的评判。在 UI 设计中也是很受用的。

  题外话,第一部分的“抑扬”,其实还和 IA 设计相关,这里就不展开来细说了,先从这几个简单的小技巧开始,让产品的UI设计变得更简单吧。

时间: 2024-07-31 23:21:57

UI设计显得更简约的小技巧的相关文章

PPT扁平化设计的8个实用小技巧

PPT扁平化设计的8个实用小技巧   扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一个师兄做一个PPT,用了几乎每个人都听说过的扁平化风格.于是趁热打铁,找了一些扁平化的作品和文章看了,自己对扁平化做一个总结,希望对你ppt抑或海报设计有所帮助. 注:此处所谈的扁平化指的是一个大的概念,将后面衍生出来所谓的"似扁平化"也包含进来. Tip 1:关于高光.渐变和投影

UI设计中的简约之美

  不需要华丽的外表,不需要繁琐的装饰,不像游戏UI有华丽的皮肤装饰,绚丽的动画效果,看似很简单的应用UI,其实它更能够给用户带来一个视觉上的舒适感,和长期的耐看程度.同时也考验着设计师视觉设计能力,排版,字体,每一个路径,描边,每一个弧度,每一个阴影,每一块的颜色搭配,每一个高光和按钮,他们的融合造就出的一个界面,不仅要方便用户操作,还要给以舒适的视觉体验,可能说的神奇了,但是也不无道理. 我给大家分享我个人比较喜欢的UI视觉设计,做一些简单的鉴赏. 一款名叫Pandora UI for iO

高手传经 网页设计中的几个小技巧

技巧|设计|网页|网页设计 如上图是Relen的个人主页Relen.com,2004版的首页发布信息,尤其是过年前后,利用雪花来点缀页面是非常合适的.注意这里面的雪花的摆设位置是有些技巧的,你可以考虑用黄金分割来支配你的设计思路,以达到合理.舒适的效果. 先排列文字,运用两到三种不同的字体,绝大多数文字对齐左侧,而其中一行突出,形成错落有致的感觉.文字的大小需要调整,主要信息文字大写,字体突出.而其他根据信息主次和平面设计的要求等多种因素进行排列.个别地方使用斜体加强,或用加粗的形式明示. 字体

提高可读性,3 个让代码更简洁的小技巧

在完成代码重构之后,我总是会获得一种莫名的成就感.其实,不仅是大规模的代码重构能给我带来这种感觉,一些小的修改也能让我感到很高兴.以下3个简单的重构技巧就能帮你改善代码的可读性. 1. 清理格式 代码的整体格式最能影响代码的可读性,让你迅速找到需要的代码.正确的缩进.分行和模式能帮助开发者省去大量的无用代码.你可以看看下面两种格式的比较.先看第一个格式: Inventory inventory = new Inventory(); for (int i = 0; i < cars.Count;

如何让电脑运行更快点的小技巧

如何让电脑运行更快点呢? 除了一些常规的系统优化方法外, 这里再介绍一点方法,有硬件方面的方面, 也有系统优化方面的方法, 也有软件优化的方法. 1)增加系统的内存, 如本来你是1G的内存, 你可以升级到2G. 2)可以在系统中安装Ultra-133硬盘加速扩充卡或带有更大缓存的ATA硬盘,可以有效减少系统的启动时间和读取时间. 3)升级主板和显卡的驱动程序,升级BIOS. 4)系统盘使用NTFS格式的文件系统.可以这样查看 :双击"我的电脑",在C :盘上右击鼠标,选择"属

让U盘更安全的小技巧

  为了避免电脑使用U盘时,通过双击,或者右击盘符时,导致把病毒感染至整个电脑,因此使用下面的方法,可使U盘病毒不被激活传播. 在取消了U盘自动运行的情况下(在组策略中一定要关闭自动运行功能,否则只要一插上U盘,就会自动打开U盘使病毒传播). 插入U盘后, 在Windows操作系统中点击左下角"开始"-->"运行"-->输入"CMD"命令 (进入DOS命令模式)-->键入"G:"(举例G盘为U盘的盘符,此命令

UI设计提速秘笈:Photoshop CC使用技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC精彩新功能 多重形状和路径

Photoshop CC UI设计提速技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC精彩新功能 多重形状和路径

UI设计提速秘笈:Photoshop CC使用技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC 精彩新功能 多重形状和路