ui设计基础知识

ui设计基础知识（精选8篇）

ui设计基础知识 第1篇

UI设计基础知识

UI设计学习者经常会陷入迷茫期，学习内容零碎杂乱、自觉性差、水平不够、无人指导走弯路等问题接踵而来，导致很多人半途而废。要想从零基础小白成长为真正的UI设计师，需要制定合理的学习计划，并加以系统的学习课程，才能助你快速成长为一名优秀的UI设计师。

一、【UI设计需要学什么？】UI设计学习内容分四大阶段：

01必不可少的软件基础：熟练掌握UI设计基本软件Photoshop、Illstrator核心功能，让成为UI 设计师事半功倍。

02各模块的设计学习：系统全面学习习近平面设计、网页设计、APP设计、交互设计等各个版块，打造会设计、知交互、懂用户体验的UI设计师。

03UI项目实训：通过项目实战案例的练习，积累设计经验，提升设计整体水平。04高薪就业指导：提升综合素质及实际求职能力。

二、UI到底是什么？

User Interface（用户界面），简称UI，是指从事对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分三个分支：

1、研究界面——图形设计师Graphic UI Designer，简称GUI,国内目前大部分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计），每天工作做着各种界面设计。

2、研究人和界面的关系——交互设计师Interaction Design,简称ID，做整个项目的交互和流程。

3、研究用户体验——用户体验设计师User Experience，简称UE，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策。

UI设计是屏幕产品的重要组成部分。界面设计是一个复杂的由不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是： 1.置界面于用户的控制之下； 2.减少用户的记忆负担；

江西新华电脑学院

3.保持界面的一致性； 即要符合用户的心智模型。

所以一个优秀的UI设计师，从技能上讲，不仅能画图标，还能做好界面，会很多交互知识。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

图标，界面，交互知识都是需要长期的经验积累，所以UI这条路很长，要学的技能很多，大家加油吧！

三、UI设计师工作中都做些什么工作？ 1.视觉设计（GUI）

界面设计并标注尺寸（设计规范）； 图片资源导出给程序员（切图）； 启动图标设计；

制作海报、商品图、活动页面等图片资源； 提交到各大平台的推广图。2.交互设计（ID）需求分析；

理清操作流程（流程图、线框图）；

负责项目中各种交互元素的设计（交互文档、界面跳转、图标、按钮、动效）； 优化页面，使用户操作更人性化。3.用户体验设计（UE）测试软件功能、界面美观； 搜集用户反馈，提供优化意见； 参与到产品迭代过程中。

大部分公司招UI需求上包含以上所有内容。大点的公司会细化以上职责。所以一个好的UI设计师需要学习的知识是巨大的。

四、UI设计师工作流程是什么？ 1.需求分析阶段

此阶段，遵循3w原则（who目标人群、where使用场景、why解决什么问题），梳理产品需求，分析相关竞品，确定功能模块。输出：需求文档。2.视觉概念设计阶段

江西新华电脑学院

在确定产品需求后，交互设计尚未完成前，由GUI主导，根据需求文档及竞品分析后作出的只关注产品视觉主要特征的设计工作。输出：视觉概念方案2套备选。3.视觉详细设计阶段

通过视觉概念设计确定产品界面视觉效果，并根据交互设计确定产品每个界面具体的布局以及内容后，便进入到视觉界面详细设计阶段。此阶段需要输出所有典型界面的效果图（高保真原型），控件的所有不同状态效果图。输出：设计方案效果图。4.设计评审阶段

设计师在发起评审前需先在线下与其主管沟通并确认参与评审作品的质量，确保用于评审的作品无重大纰漏再发起评审。评审的意义在于获得不同领域反馈，检查设计是否存在偏离，是否存在对产品有害的部分，并诱发设计师潜力。输出：演示文档。5.标注、切图、命名规则

通过评审对视觉设计定版后，需要为开发提供程序使用的图像资源，开发必需以此为依据完成页面开发。

输出：切图包，内含图片资源（注意命名规则）、界面原图、界面标注图、规范文档。6.视觉测试阶段

将图片资源及规范发给开发后，设计师需要根据设计图判断开发实现的界面是否符合设计方案，并在开发工程师在界面构建过程中遇到问题时给予所需的解决方案。

输出：新修改的图片资源、新的规范、测试报告。7.开发完成、投入使用

制作各平台宣传图片资源，参与产品体验测试，搜集用户意见，为产品迭代确定方向。

输出：图片资源、测试报告。

江西新华电脑学院

ui设计基础知识 第2篇

UI设计是一个用途比较广泛的专业，很多人都搞不清楚这个专业到底都亚学些什么，UI设计在的电子界面领域应用非常广泛，行业收入也比较可观，学好UI设计意味着拥有广泛的就业前景，但是UI设计的知识面非常广，导致很多学员感到无所适从。下面我们就来从工具到理念讲起

我一直坚持这样一种看法，不管你学的是哪一种设计，其学习内容都无非包括四个部分：

1、了解专业背景知识，2、掌握工具技能（如：如何学会绘图、使用相关设计软件等）、3、商业运作规则的了解，4、审美能力的建构艺术理念的习得。

一般的UI设计都会涉及的内容有：素描、UI手绘、UI色彩、三大构成、创意设计、设计心理、PS基础、PS提高、illustrator、Flash、After Effects、设计规范、GUI基础课程、创意设计、综合理论与实践、静态网页构建、前端程序开发、动态网站简介和应用、UX理论、AXURE-RP6.5、iphone/Android、手机交互等，涉及的应用领域不可谓不多，因此要想全部掌握或者眉毛胡子一把抓是不太明智的，下面我梳理出一些概要的学习方法，仅供大家参考。

第一：学习工具

工具是第一位的。一般对于入门阶段的人来说，你就不要老是纠结怎么学。先玩透Photoshop，UI设计的工作中最主要的工具就是PS，比方在做一些图标和界面的时候，PS都是必不可少的。

但是Photoshop有那么多功能需要每一个都学吗？当然不用，这个后面我们专门找一节慢慢说，在UI设计中ps主要学习也就那几个工具。

第二：学习UI设计规范

规范就是要刻意练习，规范这个主要还是要练习，没有太多捷径可走。

第三：基本的色彩学习

色彩的三要素指的就是色相、明度和纯度。这三个分别是什么意思呢？我们可以这样理解：

1、理解什么是色相

色相指色彩的相貌，不同的波长决定不同的色相，这是大家最直观感受到的色彩。色相对于色彩是最直接的代表，是色彩的灵魂。

大家大家都知道在光谱中，红、橙、黄、绿、蓝、紫等由于有着不同的波长，带给我们不同的色彩感受，它们是最基本的色相，其他诸如象牙白、柠檬黄等都是指色彩特定的色相，是人们对不同色相的不同称谓。有一个地方要注意，黑色和白色是无色相的。

2、理解明度

明度指色彩的明暗程度。明度可以说是色彩的骨架，明度对色彩的结构起着关键性的作用。明度具有定的独立性，它可以离开色相和纯度单独存在，而色彩的色相和纯度总是伴随着明度一起出现的，所以明度是色彩的骨架。

通俗点解释就是通过色相的加白加黑的一个变化，任何色彩都存在明暗变化的，从明度光谱上可以看到最明亮的颜色是黄色，处于光谱的中心位置。最暗的是紫色，处于光谱的边缘。

3、理解纯度

纯度指色彩的鲜艳程度，就是色彩的饱和度、纯净度、彩度。直观理解就是指色彩的鲜浊程度。纯度最高的色彩就是原色，随着纯度的降低，色彩就会变的暗、淡。纯度降到最低就是失去色相，变为无彩色，也就是黑色、白色和灰色。

4、学会UI设计中色彩的使用

那么在UI设计过程中色彩该如何去搭配？主要通过4部分来讲解。在UI界面设计比例中：用色一般分为主色，次色和辅助色，它们的比例是按照20%-30%、5%-10%和5%来进行配色，通过不同的配色比例让界面看起来不会出现突兀或者是主次不分的情况。

5、进入临摹阶段

了解了具体的知识，最主要的就是练习了，学习技法主要是侧重过程，在练习书法时，最好是临和摹结合起来，各扬其长，各避其短。此外，还要经常读帖，仔细观察、分析、体会，可以边读边用手“空临”。只要功夫下得多了，读帖和写字的能力自然会增强，对书法美也体会得更深了。需要联系临摹来加强你的技巧，此外，为保存、修复、展览、出售而取得复制品，侧重的是临摹的结果。因此，临摹品有商品性质。它流传于世又产生了伪作和赝作等复杂问题。在世界各国，临摹一直是学习古典书法或绘画技法，借鉴和继承优秀传统的主要途径与手段不要想着怎么做，怎么临摹，学啊~直接打开ps就开始操作，如果不知道怎么临摹，可以多加几个大神群去问。这个阶段的就是要：多练和多问

6、学会切图

之所以需要切图是因为用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。

切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！

好了，大概这几点，当然这个只是学习UI设计的中的其中一小部分，也是入门的阶级。如果你觉得有用，就是今天这一篇最大的目的。

7、习得扁平化思维

扁平化实质就是简约风格，这种美学的哲学内涵就是：少即是多

扁平化的概念最核心的地方就是:去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

也就是说做扁平化设计是在做减法，不像之前的拟物化，要考虑到诸多的质感、光影等细腻的地方。所以对于手绘功底不强的设计师来说，只要了解造型和透视关系，对于扁平化图标绘制就没有问题。界面过于单调，容易审美疲劳。扁平化设计限制了可采用的元素——

比方说其中就没有纹理——同时也就限制了内容的表现形式。更何况扁平化的GUI基本都是大色块堆叠出来，对于设计与制作业提高了不止一倍两倍的工作效率

8、UI经典设计的借鉴能力

借鉴本身就是创新的一部分，创新的本质就是嫁接和组合，好的UI设计作品非常之多，学活借鉴，有效的、高明的借鉴就会快人一步。

UI设计中图标设计探索 第3篇

(一)按属性分,分为启动图标和工具栏图标

1. 启动图标就是代表产品的象征符号,通过用户的点击起到运行及打开产品及软件的作用。

启动图标与标志设计相比有一定的相似之处,是产品或者企业的象征。但启动图标讲究可读性,而标志设计则更注重抽象和象征寓意并更多地从企业文化视角出发,强调寓意的深度。启动图标出现的平台单一,以电子屏幕为主,而标志可以出现在任何相关平台。

2. 工具栏图标就是软件及产品内部起到解说和装饰功能的图标,是工具文字化解释的图标化设计,以增强界面设计感的表达和用户体验的趣味性。

简约、概括、传达性是工具栏图标的主要特点,系列化设计也是工具栏图标区别于启动图标的典型特征。

(二)按表现手法分,分为拟物化图标和扁平化图标

1. 拟物化是指在最直观的印象上与实物尽可能地相像,通过造型、质感、文理、阴影等效果的运用对事物进行再现,让人可以一眼就看出来这是什么东西,有的可以表现得尽善尽美,有的可能就让人觉得过于追求细节,甚至是过剩的装饰。

拟物化的设计也有一些致命的缺点,比如过分注重形式,缺乏功能性的展现;将时间大量花在各种效果的呈现上,忽略了形式美的表现。拟物化设计确实引领过UI设计的先锋阶段,功不可没,我们从中得到了更多经验的总结,也锻炼了很多设计技能,是设计师进行UI设计的必经阶段。

2. 扁平化是指摒弃高光、阴影和透视感的效果,通过抽象、简化、符号化的设计元素来表现。界面表现极简抽象,矩形色块、大字体、光滑、现代感十足,让你想去体会这是什么东西。其交互核心在于功能本身的使用,所以去掉了冗余的界面设计。扁平化是通过尽可能抽象的语言表现图标的符号化和简约化,更加注重造型的形式美的视觉语言而摒弃细枝末节的设计。扁平化图标多以简约的线条、形状、高级的渐变配色和元素的构成关系夺人眼球,简约而不简单。

二、图标差异性的表现

图标设计在不同平台差异性还是很大的,比如不同的媒体形式,电脑、手机、平板电视、智能家居,等等。在同一平台的不同品牌也有很大差异,这也是体现多样化和个性时代所需。但总的设计指导思路是不变的,都是要满足视觉审美日益增进的用户,让他们真正地体验到什么是好的设计。作为设计师需要分清不同平台和同一平台不同阶段产品在规范上的具体使用,跟随时代发展与时俱进。

(一)在电脑系统中

windows历代系统中直到windowsphone系统出现,图标风格有了翻天覆地的变化,是拟物化到扁平化最典型的案例。极致的扁平化的界面,大胆的结构划分,图标的极简设计,纯色填充与镂空,一时间受到了众多评论,褒贬不一。现在来看是设计风格发展到一定阶段的必然结果,需要一个代表性的设计思想去做突破,这一过程也是人们的视觉审美认识水平进一步提升的表现。这也要求设计者不断积累学习最新技术,扩展设计思维,满足更加挑剔的用户。

(二)在手机系统中

苹果公司的iphone系列也是图标演变的教科书式范本。ios7横空出世之后,扁平的界面图标立马成为了大家议论的焦点,这次的风格转变得到了很多赞同之声,虽然有些较为传统的用户不大习惯,速度也受手机本身的配置所限,但界面的优化让用户看到了一个全新简约的界面形式,释放了屏幕,解放了双眼,图标颜色的全新配色也让人眼前一亮。

三、扁平化的逆袭

(一)开发更加简单

拟物化到扁平化的变革实际上是UI设计发展到一定阶段的必然结果。互联网科技下的数字媒体设备的更新换代逐渐代替了传统纸质、电视、广播等媒体,现在人们的生活逐渐被数字化的产品所替代,手机、电视、家电、电脑、平板等一切与生活有关的设备都趋于操控的智能化。拟物化在起初对人们认识新事物时是有一定的启发和指导认知作用的,让人们对这些智能产品的认知达到了一定的习惯性,对更新换代的新产品就有了更大的信心和好奇感,人们就会更加注重产品的美观和操作的流畅性,扁平化也就应运而生。而具有代表性交互动作的图标,则成为主要表现扁平化设计的载体,让人们能更好地与产品沟通与交流,开发也随着技术和界面扁平化变得更加简单。

(二)使用更加高效

拟物化的时代是装饰过剩的时代,经不起人们的细细品味。我们做的每一样设计不可能都去像画工一样描摹得逼真,我们更应该像艺术家一样提炼精髓,抽象简约地去表现事物,赋予它灵魂。大家都喜欢有意境的抽象符号,会让我们的认知更清晰。在未来的设计中,一个时钟APP要特地地设计成时钟的样子,那一定是傻透了,装饰过多会分散注意,无法更加注重更多好的互动体验,反而降低了效率。

(三)缓解审美疲劳

无论是绘画还是设计,繁久必简,这就像进化规律一样那么的有效。随着windowsphone和苹果ios界面的发布,扁平化就像一阵春风,瞬时间改变了流行的面貌,使得设计变得更加简约清晰。解放了用户的眼睛,削减了视觉审美疲劳,被更多逐渐变得简约、优雅的设计所替代,可以说这场变革改变了人们焦躁、烦闷的复杂生活方式,让生活越来越好。

四、扁平化图标设计的技巧

扁平化图标的流行也有了几年的时间,如果你细心观察过,各个平台的设计都趋于扁平,并且很多扁平化的设计都很雷同,令人印象深刻的也不多,甚至很多时候我们能找到一样的案例,怎样将扁平化赋予生命的力量,也有很多技巧。

(一)简单的设计元素

扁平化完全属于二次元世界,每个图形简单又安静,没有那么多繁杂的点缀。这个概念最核心的地方就是放弃装饰效果,诸如阴影、透视、纹理等能做出3D效果的元素一概不用。所有元素的边界都干净利落,就像剪纸一样有清晰的轮廓,美丽的形状,甚至单纯的颜色。尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,操作起来简单便捷。

(二)关注色彩

关于扁平化图标设计中,从ios7的风格我们就有了非常明晰的感受:界面图标的色彩相对之前拟物化更加绚丽;一些简单的晕染和渐变颜色的使用让人极易被吸引;繁杂的修饰已经远去,让我们心动的是这些漂亮的颜色;颜色之间搭配的考究远远超过拟物化随意的配色方式。对色彩的敏感度也正是考验设计师水平的重要因素。

(三)图形更具创意

自从扁平化设计成为风潮以来,图形创意就尤为受到重视,再也不是元素的简单罗列,堆积成一个具象的图标,而是绞尽脑汁地去想如何用最简单的符号语言去做创意,达成一系列图标的统一化。也不是越简单越好,缺少了正确的传达性再简单也是失败的设计,让外观充分表现产品功能才是正解。并且这和标志的设计还有些不同,标志是单个体的表现,而图标往往是系列化的呈现,所以越是有想法有表现的图形越能被吸引,再加上完美的配色,想设计出一组精美的图标也就变得不那么困难了。

五、结语

浅析UI设计中字体设计 第4篇

文字是人类表达情感最好的体现，在UI设计中文字的美感对UI设计的成功与否有着很大的关系，文章主要就UI设计中的文字设计展开分析。

关键词：UI；界面设计；字体设计

文字是人类生活表达的一种方式，也是人们表达情感的一种直接体现。事实上，无论在那种视觉媒体中，文字和图片是最好的传达媒介。在设计的过程中，文字排列组合的好坏直接关系到所表达的视觉效果，因此在UI设计中，文字的字体设计占据很大的比重，它能够赋予设计的美感，提高设计作品的传达力，是版面审美价值的一种体现。

一、UI设计中的文字意义

（一）文字的可读性

文字最基本的功能是向大众传播各种信息与情感，所以在UI设计中，文字的最基本功能必须保证整体信息的传达，给大众一种清晰的认知。在设计中，文字要适当的简单易懂，避免过于文字过于凌乱，忘记文字的基本功能，当然以最精炼的文字传达作者的设计意图是需要考虑的。

（二）文字位子的整体性

文字的布局应该考虑到整体效果，也就是不能够让视觉感受到文字布局的冲突，这样会感觉不到画面布局的主次感。好的文字整体布局可以使设计作品在含义与气氛上达到和谐境界，事实上人都有着一种自然审美的观念，这是一个较为微妙的感觉，需要仔细的去体会。电脑在这方面所能帮到你的很少，有时还需要自己去注意细节。

（三）视觉美感

文字最为画面传感的要素之一，是视觉情感传播的主要媒介，因此它必须有着强烈的美感，，这样在能够人们感受到美。字型设计、字体的组合都能够让大众感受到愉悦，在心底留下美好的印象。如果文字不能够产生视觉美感，难以让大众在心理接受，甚至都对其不屑一顾，作者也就无法向他们传达自己的意图构想。

（四）文字设计的创造性

在进行UI作品设计时，需要保证作品的主体个性突出，这可以在文字的设计上有所突破，突出文字的个性化色彩，创造独特的字体，这样给予大众一种别开生面的感觉，对作者所展现的意图会有很大的帮助。在设计时，可以根据字体的形态特征在组合上进行探索，实现个性化的文体设计，从文字形象唤起大众心中的愉悦感受。

二、字体图形化设计

对于快速发展的互联网而言，单纯的文字美感设计是无法应对用户们的审美需求的，因此在单调的字体设计需要得到突破。字体图形化就是一种很好的突破化设计思路，更加能够满足电脑用户对个性化审美的需求。字体的图形化设计能够营造良好的页面范围，更好的传递设计意图。例如在进行页面设计时，我们需要对标题文案，包括整个活动的专题商业需求都要经过特殊的设计处理，这样才能够保证与内容文案形成对比性，能够吸引用户的眼球，帮助用户充分的了解页面信息。

（一）字体的变形设计

字体的变形常被运用到UI字体的设计中，它是在电脑字体的基本形态上做出稍微的变形，这样使得整体画面的线条显得更加圆滑，也是字体字型变得更有活力，当然这种变形调整需要依照具体的情况进行操作。当然字体的设计最终目的是让用户能够快速的获取信息，过于的字体变形会让字体变得模糊，使设计舍本求末，失去原有的意义。

（二）字体的组合设计

我们应该明白，字体不会是孤立存在的，这不仅是字体的来源可以追溯到图像，也就是说文字的本身来源是人类生活情感的象形。在某种程度上来讲，文字来源于图形，因此图形与文字是同源的，只是文字更加抽象。

图 字体组合设计

例如上图，字体与图片的相互相互融合，就能够更加清晰的理解和传达设计信息内容，并且取得良好的效果，在设计的时候需考虑与周围的其他页面元素的协调一致，强化页面的整体氛围的营造。需要把握它们之间的融合点，使其更加和谐。

（三） 3D字体设计

人们生活在三维的立体生活中，对空间的感觉很为情切，因此在平面中营造一种具有空间感与层次感的字体设计，可能会让用户觉得更加真实，更加有冲击力。3D设计需要借助相关的电脑工具来完成，不管是3D软件辅助设计还是PS/AI，都能够使文字根据光感实现层次空间的变化。

（四）字体颜色大小设计

文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个站点通常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近。比如，站点的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。

三、结语

在UI界面设计中，不单单是需要美术绘画，同样需要根据设计所要表达的意义对字体、字型的设计做出艺术性设计。判定一个界面设计的美感不是单纯的项目领导的肯定就可以了，而是应该以用户对于界面设计的满意度作为评价界面设计是否完美的标准，这需要最终用户对设计的感受，所以只有在设计中不断的与用户的视觉体验相连，才能够保证设计的完美。

【参考文献】

[1]郭丽莉，王文彬，费英.现代平面设计领域中文字的探究[J].商业文化（下半月），2011（02）

[2]李卉.图形化文字在信息传达中的应用[J].运城学院学报，2010（05）

[3]王晓丹.以人为本 创新感受——浅谈网页设计中UI设计的用户体验[J].中国艺术，2012（01）

ui设计基础知识 第5篇

今天在整理本月邮件时发现这个邮件可以公布在BLOG上，也许会引发一些话题和收获。

Vinny 致 我

引用自

抱歉，可能我们正在做着没有意义的事情，但是在我们还没有得出一个结论的时候，大家都还抱着一些幻想和期待!

附件是我纪录他们讨论的截图!期待您的回复：)

附件：

白鸦 致 Vinny

引用自

其实很早一起我们就谈论这个问题，

很多人把类似的“UI组件”“UI控件”叫做“UI规范”， 后来我们讨论的结果是：叫做“UI指南”比较合适。

因为“规范”是虚的!“指南”是用来指导和提高工作效率的

我觉得如下几点需要说明：

1、不管是叫“UI控件”还是叫做“UI指南”，它都不应该和“直接产品易用性”扯上直接的关系。 它顶多只是“项目管理”或者是“产品开发”的一个“效率管理”范围。 只是一种“工作方法”而已。

2、千万不能为了“让产品开发的资源库中多几个G的资料”而搞这些东西， 为了规范而规范只能劳民伤财!

3、这种“UI指南”做好了做实用了确实会对产品的开发乃至整个产品的规范有很大的作用，某些程度上说也是提高和规范UI的一个重要方面。

4、做这样的东西不同的产品应该有不同的办法，“没有通用的易用性/可用性”。

5、一个长久的产品确实很有必要具备这样东西， 因为真正的项目不只是一个项目应该是一个产品 甚至应该说是一个品牌。

所以这样的东西也很有必要。

6、不要说“作出来这样完成的系统指南成本太高，我们不去考虑”! 其实完全可以“先计划一下，慢慢去做起来”。

不要想一口吃个胖子，也不要一点事情都不作。

也许你开始作了就会发现：“慢慢积累，点滴去做，很快就有成绩出来了”。

先做起来

7、另外扯一个话题“没有行业规范”，

所谓的行业规范应该是同行企业之前慢慢形成的一种通用习惯。

在这个商业社会上，如果谁说他的东西是“行业规范”，那么他一定有很多另外的目的.

8、如果做了这个东西，一定是要长期维护的。 最主要的是“开发者用着方便”。

9、其实我更关注“用户情感设计指南”，比这种“用户界面应用指南”要有意思。 最近太忙，有时间写篇BLOG解释一下这个。

参考：

www.uicom.net/blog/article.asp?id=95

www.uicom.net/blog/article.asp?id=169

Vinny 致 我

引用自

谢谢您的见解，还有个棘手的事，各个角色争执不下原型问题

以下是两个角色的观点，我也为之困惑：

UI：UI需要BA(业务分析师)，提供一个明晰的业务流，来完成整个原型设计;

BA：完成需求分析后，再接着完成原型(比如visio)，以及页面流(体现小部分交互样式)。

先前，原型和交互通常是UI根据BA的需求说明书来思考完成。但问题在于需求说明书的业务场景是所有角色(或权限)的全集，相关的细业务流是模糊的，这样通常导致UI输出的页面流不够完善、业务需求反复修改!

目前由BA取代需求、原型和交互这部分工作，我的UI同事认为这样会忽略可用性的问题，造成不好的用户体验，以及产品价值。

其实就我们的业务特点而言，用户是有着相对的特殊性，我的疑惑：要照顾到特殊性就非得忽律对可用性的重视么?!

BA认为UI所须做的是不参与项目工作，而是来规范和评估他们的原型结果，BA承担原型和交互其间问题你怎么看?!

您认为下面这个流程有什么是可以省的?或有什么地方存在意识上的缺陷?

用户研究-分析需求-可用性设计-出原型-用户沟通迭代-gui设计-code

白鸦 致 Vinny

引用自

我这两天在家做手术，没有太多时间回答你的问题。

暂时我只能说：你的看法和观点有点片面，********

等我身体恢复后请提醒我，我应该可以给你完整的回复。

起码可以肯定一点：在这里流程不是最重要的，重要是的协作方法。

sorry 。。

UI设计UI图标设计初阶要先型 第6篇

UI最重要组建之一就是图标，随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达，平面图标已占主导地位，每位设计师所处的阶段所关注的要点是不一样的，我把图标设计分为2个阶段–初阶与高阶，这样分是为了有步骤性的学习和进阶的加强，当然，能人的话一步到位，对于新人来讲会较难，需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言，但是我可以分享一些实实在在的基础方法，也是这几年会给带的学生反复必讲的入门辅导，有自己成熟方法表达的设计师可忽略这里，这里先说初阶的设计关键要点。

【一】概念类别

扁平化图标大部分无非就是剪影表现，而这里为什么重点是讲图标的形状设计，而非色彩，因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力，好比建筑造型与装修的关系，而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种：面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型，线与面之间的独立与结合的变化。

l 简化的微写实图标

这类通常是彩色一体表现，造型和组合上较写实，不是纯剪影，是写实过渡来的简化，又接近剪影，扁平简化设计，这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析)，大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多，也更加容易塑造风格，更多是在色彩上有得发挥和考究，用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达，叫所谓的“低面建模”,感兴趣的去搜一下。

上面提到的元素组合，比如下图这个图标目前是2个元素–信封加信纸，如果还要再加什么功能状态示意，最多在右上角加个很小的消息提醒。因为元素越多越复杂，所表达的含义也就越多，同时也会影响造型的调动。不管多少个元素总有一个最重要的对象，其他为辅助图形，在塑形大小复杂度上有区别。

1.1本文半原创图例

l. 剪影的正负形图标

这类通常是单色表现，当然也有综合彩色的。其更加简洁抽象， 言简意赅，高度提炼精华，讲究表象意境，具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表，注意，没把握好就会变得很“空虚”，把握好了就是时尚的feel啦~

负形图标是以线绘制的图形，高度的轮廓概括，就跟画骨骼一样的要求精准到位，也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格，如果画不好就很容易俗气和简陋。

正形图标是以面绘制的图形，也有和线综合表现情况，自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换，手机tab上最常见，如ios7。

优点：简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达，这里指的范围是互联网上的全新应用);具有设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。

1.2本文原创图例

图标为上传到云端的之意，这里的主对象是云，所以箭头和云的比例是不同的，上传箭头是辅助图形。了解界定多元素之间的主次关系，就能够把握一个整体的造型走向。典型的基础表现就是上面两种，然后在实际绘制中根据自己的喜好和设计来进行融合，可以得出更加丰富的表现。

【二】设计技法要点1、关键节点绘制法

拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。这里举例剪影图标绘制方法技巧，3步骤可以搞定，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少;难的是这调整的过程与产品环境的融合性，易用性，还有你自己的创意想法。说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。

l.提炼精华勾勒轮廓

通常在绘制已有参照物的基础上去设计一个图标，可以根据你喜欢的造型参照物去进行分析，先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形。

2.调整线锋优雅得体

基础雏形出来后就开始加入自己的想法调整线锋，线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了，不断调整对比，挑选出一个最优再进行下一步。

3.增特有细节出风格

最后一步的塑形，就是画龙点睛!造型的特点就在这一步去完成，

2.1 本文原创图例

对于新老设计师来说，这样的方法都是比较可取好用的，交互设计师也可以这样快速入门哦亲!尤其是第一步骤，能否非常快速的出雏形。下面是其他案例的设计方法欣赏，跟我上面总结的一样道理。

2.2图例来源于Digial Art

2.3图例来源于iconwerk

2、精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~

1.犀利清晰

需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是最影响图标基本质量的问题点。

1)轮廓发虚

图标一定要用矢量绘制，但是新手很容易犯的第一个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2.4本文原创图例

2)斜形发虚

斜线也是会有模糊与精致之分的，不仔细对比其实是比较难看到问题，可能很多人都会碰到图形进行倾斜效果时是有锯齿的，那就是角度的处理问题了，自己进行多角度对比下试试，会发现哪一个角度最清晰。也可以将图层进行双层叠加，会非常犀利哦~

2.5本文原创图例

3)像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。

2.6本文原创图例

总结一下上面的处理方法，坚持最少发虚原则：

2.7本文原创图例

2. 比例协调

图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。

2.8来自苹果图标及来自Seevi Kargwal图例

如果头眼昏花嫌麻烦，也可靠经验感觉快速完成一个具有平衡感的图标。

2.9本文原创图例

3. 视差平衡

同一个尺寸规格，但根据不同形状的图标，会导致面积占比引起的视差大小不同，但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制，按道理这好像是准确的，但由于人的肉眼会有视差问题，所以做的设计就要暂时抛开科学，以人的真实情况去判断再调整。

2.10本文原创图例

【三】系列成型图标

能够熟悉掌握完以上基础要素，恭喜你可以大胆的去创造系列图标了，当个数图标设计确定好后，接力的图标必须延展其风格设定：造型规则、样式、细节特征等要素统一设计–繁衍具同视觉与内在含义属性的图标。

3.1图例来源于iconwerk

Ps：我非常欣赏iconwerk的图标设计，只因我在5年前发现他的剪影图标作品一直到现在都是那么爱。传送门：iconwerk.de/iconwerk10/

3.2本文原创图例

3.3图例来源于Yorlmar Campos

3.4图例忘记来源于哪位设计师了

3.5图例来源于Jee

【结尾】

ui设计基础知识 第7篇

无论多牛B的ui设计公司,无论从应用程序开发，或者是网站建设，用户界面设计这是成功的关键因素。

在UI设计教程中，我们分享11个UI设计技术，可以应用于网站开发，软件开发，或更多设计中。这些设计技巧与我们的UI设计培训结合，快速学习掌握UI设计的用户界面艺术。

一、每个设计都能实到其它终端目标：

每一个用户界面都应该建立在以实现一个端目标。 比如，iPhone的拍照摄像设计，使其尽可能容易拍照；而像Facebook，是为了使聊天和分享尽可能一样容易。

从导航到Web表单，用户界面的各方面，应建立以实现您的应用程序目标 ，无论是执行一个函数或者发现新的东西 ，尽可能简单，为用户实现。

二、把一切尽可能简单

当涉及到用户界面设计，简单是成功的关键。复杂的接口属于企业软件和技术的实用程序，目的是在一般情况下，是为使用户易用易懂。­­­­­

尽量减少你的设计来降低它的核心功能，使其隐藏在它的任何高级功能，仍然可以输出的方式。这使得它更容易专注于自己的主要目标，并设计一个流线型，简单、友好的用户界面。

在ui设计课程中，iPhone应用程序界面设计对于初学者来说，会帮助你了解使用简约和简单设计有效的用户界面背后的战略。

三、人机交互

确保我们设计的应用程序，方便易于用户接受。如果你设计程序运用习惯，不为用户接受的话，这种设计习惯是很难实现人机交互的。

四、流动、重点、方向导航

用户界面需要流动性。从每一个元素，在从弹出的内容框中Web表单，应自然地流动进入到下一个。这对于退房和其他需要的用户进行购买系统的接口尤为重要。

想想，假如你要设计一个旅程用户界面，需要连接两点：A和B UI的目标是帮助用户在旅行中，你可以实现流畅的，最自然的方法对B，剥离下来并简化您的UI最短的旅程。

五、使用高品质，专业设计软件

许多网上用户界面的应用程序简化了UI设计的过程，但妥协的结果，

如果你设计的用户界面，用于大众市场的软件或者您认为有可能成为流行的一个应用程序，你需要使用高品质，专业设计软件。

六、在你开始设计之前，画出你的想法

在设计之前，需要在Photoshop把自己的思路画出来。

即使是微博，或者网络上最流行的社交网络，都把思路给勾勒出来，再把再实现出来的。

因此，你可以探索的思路和创造概念时，使它易于实现、完美与简化。

七、寻找用户界面设计灵感

从Facebook到MailChimp，互联网上充斥着令人惊叹的用户界面设计的例子。如果你需要一些灵感，可以到网络上搜索，看看有什么其他领先的UI设计师做的作品。

一个快速学习的UI设计基础的最佳途是打破现有的用户界面，并试图了解它可以帮助用户做的。打破你最常用的应用程序和实用程序下来，并尝试找出如何其UI帮助他们的功能。

八、开发应用程序的键盘快捷键

大多数应用程序吸引初学者和高级用户。虽然初级用户一般会使用鼠标和键盘来操作您的应用程序，超级用户喜欢使用键盘快捷键来快速访问重要的功能。

当你设计你的应用程序，请确保您绑定很有用的功能，键盘上的按键。这可以使一个巨大的不同应用程序的易用性为最终用户并提高其知名度。

九、设计的网页，要确保它的响应

响应式设计已不再是一种选择 - 今天，这是一个必然。由于用户自己的手机，他们的平板电脑和自己的电脑接入互联网，您的网站和应用程序需要能够访问和巨大的期待在任何屏幕分辨率。

十、用颜色来表示状态，价值或重要性

色彩起着设计一个非常重要的角色，帮助我们区分元素和专注于单一任务。想想颜色用在博客和网站文字链接的方式;基于链接的颜色，我们可以检查是否有或没有被点击。

有效地利用色彩分离好的出色的用户界面。从列表和表格选项卡的接口上，使用颜色来传达的地位，重要性，类型，区域，价值，和其他重要的特性有关应用程序的各个方面。

十一、你开始使用它之前,测测你的界面设计

应用程序在发布前，需要测试它，是否存在着什么不足之处。在任何用户界面已经准备好为广大市民使用，它需要进行测试，批阅，并进行了优化。

ui设计基础知识 第8篇

在 《侏罗纪世界》 和 《王牌特工》 的网站初始背景中, 设计者分别运用电影内片段和场景景深变换, 使用户在登入网站时能很快地融入到电影主题中, 这种新颖的设计方式已得到多数设计师的青睐。随着Flash应用的衰退, 大多数PC网站普遍不加入动态变化, 而在UI中加入视频的网站却逐渐增多。在HTML中插入视频, 需要插入“video”标签, 此标签于HTML5 中供给使用, HTML5 对多媒体网站支撑主要通过包含元素项来兑现, 主要包括Video、Canvas、Audio等元素。其中, Canvas元素拥有十分重要的效用, 它好似一张画板, 通过该元素自带的API联合Java Script代码, 可以在这个画板上绘制各种图案图像以及动画; 而“Video”和“Audio”作为视频、音频特征标记, 使视频、音频从此不必绑定在Object或Embed标记中, 既提高了网页应用的安全性和稳定性, 也在一定程度上提高了用户体验, 随着近些年主流浏览器支持HT⁃ML5, 使得利用视频的环境更加容易。

Web网站和APP程序在页面跳转上是否有接缝这点上略有不同, 随着Flash的没落, HTML的网站成为主流, 页面跳转使用页面刷新, 变得乏味陈旧。然而, 通过Pjax让web网页实现了像APP那样的无缝跳转, 如同插入JQuery一样, PC版网站也可以做到页面间的无缝画面跳转。Pjax的使用, 大大提升了用户体验, 是很多主流网站, 如facebook等都支持的一种浏览方式。在电影《饥饿游戏》 (The Hunger Games) 的官网上, 点击左侧栏链接时, 页面不做跳转, 而只是站内页面刷新, 这样的用户体验比起整个页面刷新来说, 视觉好上很多, 也给用户一种未来科技的代入感。Pjax维护了web原本的构造, 在页面跳转时便替换了原定的代码, 让页面保持整洁, 有利于SEO (搜索引擎优化) , Pjax成功取代了Flash和曾经的Ajax。

大型化、低密度、长页面及扁平化表现

PC网页常常在有限的空间内加入大量单一button元素的设计, 但如今的潮流趋势将UI部件推向了大型化 (Big UI) 、低密度 (Low Density) 和长页面 (Long Page) , 加之Microsoft推出的Window10 和Apple的ios9 中倡导的扁平化设计, 扁平化设计已经在现行的APP UI中逐渐普及。《侏罗纪世界》的网页上, 我们看到设计师很明显地将上述元素运用到位, 右侧栏的button大型化, 模仿window8 和window10 中的“开始”界面栏。点击网页下方六边形的button可以推出长页面, 增加了用户互动元素, 整体网页布局采用低密度形式, 从使用者角度更容易浏览、理解, 减少了网页内容的指向性错误, 也让网页可以更好地利用触摸屏幕进行浏览, 使部分移动设备得以全方位体验网页。这些年来, 许多新型笔记本电脑上安装了触屏, 而触摸屏的使用出自手指点击, 时常不能进行精准操作, 因此用户界面增大, 元素和button之间要留出充分的空间, 页面中表现元素变得清晰, 方便页面滚动浏览。

作为大型化、低密度、长页面这三大项要素的合适布局, 趋势为一栏布局。一栏布局对于使用者, 不会再有不需要的杂项入眼, 使重要的内容汇集在一起, 页面上的文字更容易被阅读, 图片被展示得更大。在今年日本热门电影《百元之恋》的网页上, 就采用了典型的一栏设计, 在banner部分贴出大幅的电影海报, 信息栏则简要地展示电影近期动态和文字新闻, 去掉了侧边栏导航条, 让网页的层级得到降低, 减少了选项菜单, 只留下banner下方的选项栏。

关于扁平化设计, i Phone发布ios7以来就在设计界刮起了追崇之风。扁平化设计是不使用任何额外效果的设计, 去掉3D化效果, 无多重阴影、斜角、立体浮雕等创建出的凸起或凹陷的效果。扁平化网页元素并不是拒绝一切修饰效果。首先, 扁平化元素关注颜色, 通常使用色彩明亮鲜艳的色彩。与此同时, 扁平化也注重文字, 很多扁平化处理只会涵盖很少的文字, 为了达到让用户易辨识的使用感受, 设计中需要注意每一处文字的长度和字体的应用。

SVG的使用和液态布局

SVG (可缩放矢量图形) 格式可以算上目前最为热捧的图像文件格式, 与其他格式相比, SVG不会像JPEG、GIF和PNG依存于尺寸和分辨率, 无论环境变化, 无论扩大减小, 都能够正常输出显示。图片尺寸格式相对更小, 技术上可以制作成动画, 设计出高分辨率的Web图形网页, 图片格式适合在移动端和多种设备下阅览。当今设备的多样化, 画面的分辨率出现了彻底的改变。以前, 宽度符合960px~980px就可以解决问题, 如今对于分辨率多用化, 最符合页面宽度的布局当属液态布局。设计元素和图片不是用像素来定义, 而是使用百分比, 就好比将液体倒入容器中, 当容器的形态发生变化时, 液态的形态也将跟着发生相应的改变, 因此无论什么分辨率的网页, 都能够被布局成拥有一定平衡感的页面, 这样也解决了适应小型或大型屏幕设备时的缺点了。《模仿游戏》 的图片浏览页面就很好地做到了两者结合, 看似排列不同的矩形SVG图片方阵, 通过跟随浏览器大小的变更, 排列从全屏时的四行排列, 缩小浏览器视窗后变为两行排列, 这样也无需左右调节滑动条进行浏览, 而电影剧照的图片清晰度也未发生改变, 仍然保持着很好的用户体验。

结语

综上所述, 本文通过国外电影网站洞悉了一些网页UI设计趋势。值得一提的是, 趋势这样简单的概括难以在设计领域长青, 前端设计往往要做的就是打破设计的框架, 让使用者眼前一亮却恰到好处。了解趋势是重要的, 把握这个背景的网页用户的动向也不容忽视, 在没有了解用户需求本质的情况下, 如果只是为了追求网站的设计, 效果未必能够达到预期。优秀的电影网站设计, 在大商业环境下不断涌现, 跟随这样的设计趋势, 不是普通网页UI设计师的必选项, 但可以说是一个非常不错的选择。

参考文献

[1]徐镇辉.基于HTML5的视频网站设计与Web前端EPG系统实现[J].漳州职业技术学院学报, 2013 (2) .

[2]Sogilog website.“PCサイトのUIデザインにおける12のトレンド”[EB/OL].[2015-02-17]http://baigie.me/sogi-tani/2015/02/pc-site-trend-2015/