欢迎来到海淘科技官网 官方微信 官方微博 平面活动官网
微信

网络传播媒介服务提供商

热线电话

021-62677988

海淘新闻
首页 > 新闻列表 > ui设计基础知识

ui设计基础知识

发布时间: 2016-12-29 13:53

这篇文章将为接下来想要进入UI相关行业工作的人讲解一些基础只是以及总结在UI设计中需要注意的几点。

目录

1.UI的基础知识

  1.1 UI不用户的接触点

  1.2 用户看到的画面全部是UI

  1.3 UI与UX的差异

2.UI设计的基本要点

   2.1事前准备

2.2UI设计的4个要点

3.后记

UI的基础知识

UI指的是与用户之间的接触点

UI是英语中UserInterface的缩写。Interface有「接点」以及「接触面」的意思。在网络营销中,也有用户与服务的接点这一层意思。将想要传达的东西传达给用户,促进交流是提高网络成果的必经之路。正确的UI设计是不可或缺的,指的就是这里。

用户的眼睛看到的东西全部都是UI

那么,UI具体到底是什么东西呢?以web网页或APP来思考的话,用户眼睛看到的东西全部都可以称之为UI。画面与文本自不必多说,字形、风格、余白以及布局都可以称之为UI。但是通过这个说法,在实际进行设计时,很容易导致设置风格仅偏向于视觉观感,但是光好看是不行的,如何设计出最适合的UI才是关键胜负。

UI与UX的差异

一个与UI相似的单词,被称之为UX。让我们简单的看下这两个单词的差别。UI指的是和上面介绍的一样,用户比服务的接点。而UX则稍微有些不同,UX指的是根据服务让用户得到的体验。例如生活变得丰满,获得感动,购买手续变的方便等,这些可以统称为UX。总结来说,就是为了提供良好的用户体验(UX),而通过用户与服务(UI)的设定来完成,也可以说UI是UX的一部分。

UI设计的基础要点

接下来为大家讲解,UI设计中需需要掌握的一些基础要点。如果能为以后想要进入UI设计行业的人们,还在为UI设计烦恼的人提供参考的话就最好了。

事前准备

明确目标

在实际进行UI设计之前,有一件必须要做的事。也就是明确目标。根据目标的不同,可以更好的在后面进行UI的改善以及人性化设计。这里再重复一遍,UI指的是用户与服务的接点。如果不了解作为对象的用户,是无法了解到用户对于各方面的需求的。UI设计的成败与目标有着非常重要的关系。

关于明确目标的方法,一般经常使用的是一个叫作假面的方法。假面指的是:服务与产品的所提供给的理想人物。根据问卷调查以及潜在用户的分析为基础的具体资料来设置假面。这样还可以设计出更好的营销策略,并且可以让团队内有更好的共同意识。请务必尝试这种做法。

想要传达什么?

接下来,让我们来决定想要给目标传达什么。找出用户的需求,我们需要提供什么东西,自身的服务以及产品有什么特征,根据这些情报来推断出提供给用户查看的优先度。

UI设计的4个要点

在完成准备后,让我们来看看在具体的UI设计中需要注意的几点。在众多要点中,选取最为重要的地方进行解说。

遵守设计的原则

在网页设计中有着基础的原则。「接近」、「整列」、「対比」、「反复」这四点,通过良好的遵守这四个原则,可以得到更加统一的设计感。UI也会变得更加好看。接下来让我们一个个讲解上面的4点。

「近接」指的是将关联性较高的要素显示在较劲的地方,而没有关联性的东西则配置在其他地方。根据这里可以让文本以及图像就算不知道是什么,也能一眼看出其中的关联性。「整列」指的是整齐的分配要素的布局。被称之为contrast的对比指的是在显示的情报中增加强弱要素。文本的字形(尺寸与颜色等)的改变。最后的反复则是重复信息的收集以及有节奏的重复,变得更加容易读取信息。

减少情报良

在进行UI的大减时,尽可能的减少情报量也是有必要的,如果情报量太多容易导致用户不知道将目光放在哪里。这样会导致用户错过想要获取的情报。所以在事前准备时候可以对情报做一个优先度的调整。根据优先度来针对页面内内容的表示。让页面更加简洁易懂。

根据用户的目光来进行配置

用户在观看web网页时,一般会从左上开始向右下移动目光,这也是经常提到的F法则。根据字母F书写的顺序,从左上开始向右上移动,随后伴随页面的滚动来看向下方的内容,因此我们从左上开始对重要的要素进行布局,让用户得到更光滑的阅览体验。

对应手机

在考虑UI的设计中,对于手机与平板电脑的对应也是需要加入考虑范围的。特别是手机上,只有一个手掌大的尺寸。有点击以及滑动的特有操作。使用与PC版不不同的布局以及字形或者制作手机版专用的要素是有必要的。

后记

以上为大家带来了UI设计中的一些基本讲解,一次设计完成后斌股吧代表结束,今后也根据各种反馈以及定期调查来对UI设计进行调整,来完成最好的UI设计。海淘科技提供,手机主题MBE风格图标设计欣赏,还有APP MBE风格缺省页设计欣赏。更多MBE风格设计资讯等你查阅。文章下载点击:ui设计基础知识

相关文章:

版权所有 @ 2007-2023上海海淘信息科技有限公司 沪ICP备11050025号-4