首页

UI设计思路受限?来试试这5个界面设计通用技巧

周周

做设计是很难的。不仅要创建解决问题的设计,而且理想情况下,它们还应该使人们开心并感到愉悦。设计是一种技能,它是一种手工艺品,而且这种手工艺品做起来并非很容易。


UI设计师在项目各阶段该做些什么?

分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章从项目流程的各阶段来讲解UI设计师应该做些什么,如何做才能把自己的价值在项目中体现出最大化!

讲解对象:处于中小型公司项目的UI设计师(目前现状:相比起大厂的设计师来言缺乏流程和规范,也不懂系统的工作方法,容易陷入无人带+无人指导+无标准流程的尴尬境地,不知道如何在项目中体现出自己更大的价值,设计也没有自己的一套可支撑的体系,在项目实施过程中永远处于被动方)


注明:此次只分享一些大的方向,并不会具体讲解哪一块如何去实行,在一些重要的部分会稍微提一下,因为涉及的内容太多所以只能以后分块面来分享给大家。


OK,废话不多说,进入正题:

首先梳理了一个简化版的中小型公司项目流程与角色分工表(表格注明:一般中小型公司是没有交互设计师与用研的,交互设计的活儿都是交给产品经理来做,所以交互设计角色我把它归为产品经理;视觉设计会在后面重点强调所以简化说明;开发测试这一块与我讲解的内容关联不大所以也给简化说明了,但是在开发测试阶段会有更重要的任务让我们设计师去做,后面我会详细讲解)。

从上图中可以看出UI设计在项目中主要就是进行视觉设计这一块,但真的是这样吗?其实并不是,一位出色的UI设计师在项目的各个阶段都应该体现出自己的价值,特别是对于中小型公司,公司想要的是如何生存下去,就更需要团队里的每一个人在产品中创造更多的价值,而不是像流水线工人一样做完自己的事就什么都不管了,这样的团队是活不下去的,正因为这样,这也是我们设计师证明自己价值的一个机会,那么我们在项目各阶段该做些什么呢?


一:产品立项+交互设计阶段

因为主要讲解中小型公司,所以我把产品立项与交互设计放在一个阶段来讲,虽然这一阶段没有任何视觉可视化设计,但要体现设计师的价值这一阶段就是重要前提,那么我们怎么做呢?


1.查看迭代的产品文档,实时了解产品信息(一般中小型公司的产品立项已经成立,直接开始进入交互设计阶段)

目的:设计前提就是了解产品,这一点是最基本的。

延展:有助于后面协助UE“部分内容”的分析。

重点:着重了解这三大块:1.市场调研与客户需求分析。2.需求文档。3.产品特性概览及概要描述。


2.主动协助产品完成UE的“部分内容”,“部分内容”包含:市场分析/用户画像/痛点/竞品分析/使用场景(因为中小型公司的项目都比较赶,有些产品经理做UE这块内容的时候可能没考虑太多细节,有些内容没有去做,所以这时就可以协助产品主动去完成这些分析文档)

目的:有利于做视觉分析时提供更好的思路与决策,减少走弯路,减少不必要的沟通成本。

延展:对产品信息进行文字提炼,做一个有利于视觉团队理解的表格文档,方便做视觉稿时能直观的看到产品分析,也为了后期有UI新成员加入时更快的熟悉产品提供必要的文档。(表格没必要做的多好,简单直观才是最重要,后期再根据视觉风格统一优化)

表格示例:

重点:协助UE内容重点不在于帮助产品经理更细化的分析产品,重点是在此过程中能更好的拓展自己的知识面,提升自我的分析能力,为后期的视觉稿提供更好的理论支撑,以及对自己的岗位转型也具有很大帮助。


3.输出关于设计的竞品分析文档(协助完成UE内容后)

目的:作为视觉规范/界面视觉的参考,让自己的设计更具有说服力。

延展:如果有足够多的时间可以细化更多内容,进行对比分析,以便于后面做视觉稿时能快速进行布局决策。

重点:可以形成一套属于自己的竞品分析文档,以后可以套用到其他项目中,我个人的设计竞品分析文档是从4个层面/3种表现形式来进行分析的。4个层面为:表现层/框架层/结构层/范围层;3种表现形式为:分析列表;思维导图;图文结合。

给大家举三个不同形式的例子:

01-表现层+分析列表形式:

02-结构层+思维导图形式:

03-范围层+图文结合形式:

二:视觉设计阶段

这一阶段是设计师最熟悉的,也是很多设计师所痛心的,流程混乱会导致你做很多无用功,没有合理规范以至于进度提不上来,设计出的界面却说不出任何依据,也许我的一个设计思路能解决你们的难题。


第一步:根据产品文档与设计竞品分析文档确定视觉风格,根据视觉风格做出视觉概念稿(建议3版),确定好视觉概念稿后主视觉设计师针对主要功能界面设计风格定位稿。(设计风格定位稿必须要结合竞品分析文档来做,让自己的每一块设计区域都有据可循)


第二步:当出了定位稿后,就可以制定设计的周期节点(注:也可以制定周期后再确定风格定位稿,把定位稿归位节点内)


第三步:制定文件命名规范;确定设计规范(迭代);建立组件库(迭代)

1.文件命名规范:为了提高内部交接效率,尽量使文档的命名与层级统一

示例:

2.确定设计规范:设计规范并不是一步就能做好的,项目前做基本的设计规范,项目中进行迭代,项目结束后再进行总结输出最终档。

那么我们现在要做的就是项目前的基本设计规范,前期建议这些规范是必须要的:统一设计环境/字体/行高/界面栅格/颜色/icon制作规范/输出规范/最小基础间距/按钮。(规范没必要一次性就想做的非常完美,在设计中都是要不断迭代的)

3.建立组件库:组件库是通过对功能及视觉表达中元素的拆解、归纳、重组;并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库。简单来说就是可复用/节省产出时间/视觉统一,加快我们的设计步伐,让我们把更多时间用于专注于用户体验和对产品的创新。(注:组件库也是需要不断的迭代的,在项目完成后可以把组件库归位设计规范文档里面)


第四步:规范设计流程

根据每个项目不同/每个公司不同设计流程都有些不同变化,规范设计流程包含这三块:设计组交付流程;产品交付流程;前端交付流程。

目的:直接减少了因时间有限导致的设计误差及衍生的研发返工,为项目的高质量交付奠定了基础。


第五步:视觉稿设计+视觉稿交付

视觉稿设计:设计视觉稿是为了让自己的视觉稿有据可行,需要结合产品文档/竞品分析文档/设计理论这三大块来作为依据参考进行设计。

视觉稿交付:与开发商讨出最佳交付方案,统一输出规范。


三:开发测试阶段

这一阶段属于设计的一个空档期,很多设计师在这一阶段都开始了休闲时光,只是做一些查缺补漏的工作,其实这一阶段对于设计师来言是一个体现自我价值的重要阶段,那么我们应该怎么做呢?


1.与前端工程师经常沟通,查查看写出的界面是否有偏差(因为有些情况下程序写出来的界面与你所做的界面有偏差,如果不经常沟通,那么他在做同样组件时也会犯同样错误,有问题及时纠正,免得来来回回耽误工作进度)


2.重点:总结输出设计文档(定稿设计规范/定稿竞品分析文档)

①定稿设计规范第一版:包含设计过程中所有迭代的规范内容以及组件库

作用:对于设计师而言是展现业务能力的体现,对于整个团队而言是提升生产效率的重要工具。

②定稿竞品分析文档(设计类)第一版:把项目中所有的竞品分析文档归类,以及因时间问题某些板块未做的竞品分析加入迭代,综合输出最终档。

作用:简单来说就是更快为设计提供具有可行性/有依据性的视觉稿。


四:上线阶段

作为最激动人心的阶段,为了避免上线后不必要的错误以及产品后期的迭代考虑,还是有许多工作需要做的。

1.交付物走查(排查交付给开发的文件,查看是否有图标/界面/提示信息等的遗漏)

2.验收工作(界面是否与高保真原型图保持一致,图片是否正常显示,打开界面速度是否正常,动效是否达到预期等)

3.后续延伸(因项目时间原因UI样式/交互/情感化设计还没做到更细致,可提上日程留至于下期改版。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务


40张网页排版设计案例,总有一款你会用得上

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


即使现在很多 WordPress 网站模板、H5 在线编辑器等等,但网页设计需求依然非常多,线上编辑器尽管如何智能,但终究也是「模板式」,想完全符合用户需求的产品还是靠有经验的设计师来完成。即使是有经验的设计师,依然是需要不停的找新的设计灵感。

事隔一个月,@dailywebdesign已更新了30+精品网页截图,小编今天再次为大家整理出来,方便大家欣赏,同时也推荐大家看上一期的《26张很棒网页首屏设计作品欣赏》。

PS:这些网页设计案例均来自 Ins 的用户,并非 Dribbble 网站,所以没有对应的作品集页面链接。

40张网页排版设计案例,总有一款你会用得上

Design by: @vladimirbiondic

Design by: @capouska

Design by: @gtamarashvili

Design by: @abaygulov

Design by: Samuel Scalzo

Design by: @ui_ux_joy

Design by: Rono

Design by @rathniley

Design by: @brkrobert

Design by: @kreativa.studio

Design by: @fireart_studio

Design by: Oliwia Przybyla

Design by: @outcrowdstudio

Design by: @tintinsupp

Design by: @ihrvoje

Design by: Catalin Blanaru

Design by: Craig Gittins

Design by: @dannpetty

Design by: @halolabteam

Design by: Chalar Tintin S

Design by: Samuel Scalzo

Design by: @dogstudio_be

Design by: @divan_raj

Design by: @divan_raj

Design by: @outcrowdstudio

Design by: @jan.teschner

Design by: Abhishek Biswas

Design by: Michael Brewer

Design by: Cosmin Capitanu

Design by: @janravendeklerk

Design by: @arendstom

Design by: @capouska

Design by: M S Brar

Design by: @divan_raj

Design by: @syedraju01724

Design by: Yu Long

Design by: @marcocoppeto

Design by: @bestservedbold

Design by: @akasharun4161


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

6个小技巧,让你的视觉层次“蹭蹭蹭”提升!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在设计环节中,对于视觉次序的营造是每个设计师所必须精通的,视觉次序也可以理解为视觉层次,它是设计中的必然,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感。从大体来说:当用户在浏览信息很多的网页时,作为设计师要做到,即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次。从局部来说,要能在视觉上形成先后顺序。这期的内容就是设计中体现视觉次序手法有哪些?这些也是打破版式的常用手法。

一、大小对比

首先,每个人在浏览东西时都会有自己固有的习惯,比如:从上到下、从左到右,这叫常规方式,而作为设计师,不能仅仅局限于常规形式,完全的常规带来的是设计上的枯燥、乏味。要学会利用设计知识打造不同的视觉次序,营造出更强烈的设计感、层次感。

在众多营造视觉次序的手法中,大小对比几乎是每个人都能想到的一种形式,也是很多人认为的最简单的一种,比如:

通过大小对比的形式能直观营造出视觉焦点,这种形式在设计中也是最容易接受的一种。如果左侧放置的也是四块小的产品,给人的感觉就会显得枯燥、乏味,版式太过统一,而正是因为这种放大产品的处理手法,拉开了对比,才使得版式不显呆板。这种形式无论是在文字排版、海报、页面都是很实用的一种,合成设计中的近大远小也同样适用,只是在做对比效果时一定要大胆。

二、配色方式

通过改变不同的配色方式,也能在视觉上营造出视觉层次的变化,比如我们常见的通过有彩色与无彩色进行区分的手法:

在原本无彩色的排列方式中加入有彩色,在视觉上就形成了很强烈的差异化,而正是因为有了强烈的差异,使得存在差异的部分成为了更容易吸引用户的区域,所以就在视觉上形成了先后顺序,同时这种差异的形式也能起到一定打破版式、活跃版式的作用。而在有彩色之间,同样也能通过差异化形成视觉上的主次,比如:

第一行色块能最快引起注意的是第二个,通过色彩饱和度的不同,在视觉上形成了很明显的差异化,进一步改变了原本的做从左往右的习惯性视觉次序。而第二行色块中最快能引起注意的是红色,因为这里用到了改变色系的形式进行视觉上的次序划分。之所以在有彩色中也能很好的体现视觉层次最重要的一点是,他们之间形成的差异足够明显,而不是似有非有。

三、形态的不同

营造不同的视觉次序最重要的就是在正常人习惯的固有次序上寻找变化,那么我们同样可以以形态上的变化作为差异化的形式,比如:

在固有的形态中寻找其中可以引起差异化的元素,从视觉感受而言可以分为两种:第一,改变了原本的习惯性的阅读方式,也使得整体主次发生了变化;第二,原本枯燥、呆板的重复式的结构上因为元素形态的改变,也起到了打破整体版式的作用,使得整体版式变化更多,层次感更强且版式因此也变得更加活跃。形态上的变化还可以这么体现:

虽然都是矩形框,但是线框与色块形成了很明显的差异,同样也可以体现视觉层次,而这种形式在很多页面中也很常见:

这也是版式设计中很重要的一部分,也就是寻找可以打破版式且营造视觉层次的元素,正是因为这些手法,才使得版式更丰富、更富有多变性。

四、空间留白

当要求不能改变很多时,在原有的基础上只需要改变空间位置或者留白方式,也可以营造不同的视觉次序,比如:

在不改变其大小、颜色、形态的前提下,只是改变了空间留白,也能起到改变视觉次序的作用;而在编排或者标题设计中,通过空间留白的方式拉开层次、次序也很常见:

同样是重复的形式,左侧完全没有给人一种有层次、有次序的感觉,在用户眼中,这只不过是一团信息;而右侧通过改变留白的方式充分的体现出视觉上的层级关系,每一个独立存在的标题或者栏目之间都应该用留白的方式体现,这种留白要遵循的原则是:标题与文案的留白要小于栏目与栏目之间且大于说明性文字信息之间,只要这样才能真正意义上的将层次拉开。

五、投影的方式

投影在设计环节中是很常用的一种手法,通过投影可以体现出前后层次,也能改变视觉次序,比如页面设计中的:

这里只是在色块上添加了简单的投影效果,原本的视觉次序就瞬间被打破,而这种投影在海报设计中最常用的是打破前后关系,使得海报更有层次感:

这种大投影的方式,是很多海报以及页面中常用的手法之一,因为有了投影,使得画面整体形成了明显的层次关系,而投影对于用户来说也是很容易接受的,比如:按钮的投影、主体的投影等等,看似很小的改变,往往能给页面带来很明显的效果。这种形式也可以理解为形成遮挡关系,在一些小场景的设计中,一样很实用:

有了遮挡关系,就会形成视觉上的层次,这种看似简单的手法,最终所呈现的效果却是立竿见影的。

六、高斯模糊

拉开视觉次序的另一种手法:模糊,很多人对于 PS 里的模糊工具并不陌生,而通过将视觉元素模糊化处理,一样能起到营造视觉层次的效果,比如我们常见的电影海报中:

通过虚实对比,使得视觉层次变化更强,这也是合成设计中常用的手法之一,而在文字设计中,一样可以通过这样的手法来拉开视觉次序关系,比如:

通过模糊字体中某个笔画,在视觉上形成了一定的空间关系,也使得整体层次感更加丰富,这也是很多设计师喜欢在作品的最后环节加一些飘飞模糊的点状元素丰富整体的原因:

视觉层次的变化对于整体而言是不可缺少的一部分,有时只需要一点点的变化就可以带来意想不到的效果。

七、应用于版式中

这期所说的很多都属于细节上的变化,但是很多人对于细节并不重视,认为不重要,但其实优秀的版式设计基本上都是用不同的细节处理方式堆砌而成的,这期所说的这些形式用于版式设计中也同样很实用,如果你的版式太过呆板,可以通过考虑这些方面在适当的位置进行打破,打破的意思是:在原本很呆板的基础上寻找视觉上的层次变化,使得整体版式活跃起来且富有细节感,比如:

这是从一个页面中选取的一个局部信息,上侧版式给人的感觉毫无变化,如果页面中出现大面积这种形式的版式,会使得整体单调、枯燥,很容易形成视觉疲劳。而下侧区域则是为了避免这些,在形式上改变了许多:第一,颜色上有轻微的变化,这样做的目的是区分开每个栏目。第二,形式上第三个模块做了很明显的层次变化,颜色明显加深了,且投影效果加重,而且按钮区域也用色块的形式代替边框,使得整体层次感更强且有保持在一个很协调的范围内。这里用到的手法,正是这期所说的。

同样我们也可以在网上找一些版式感很强的页面进行分析,去理解这些手法是如何在版式中体现的,比如一些官网的设计,看似很简洁、元素很少,而往往这种页面对于版式的要求更高,因为要用极少的元素体现其版式变化、层次。

总结

视觉层次感是提升整体设计感很重要的一种形式,如何在固有的视觉基础上打破束缚,在形式上形成变化,对于每个设计师而言都是至关重要的;而很多设计手法都存在着共通性,只要学会灵活运用,那么我们的设计作品就不会显得平庸无常。当然这期所说的也并非全部,这些只是很常用的一些形式。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

学会UI设计中的留白,还怕作品没有表现力?

分享达人

留白对于设计的价值,已经得到相当广泛的认可了。尽管留白看起来不复杂,但是在复杂多变的设计环境之下,往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡,而要做到这一点,需要相当的实践和积累。

给设计师的私人建议!7个细微但是有用的习惯

周周

@EDC尤原庆 :今天想到一些,不一定细微,不一定有用。从设计师的角度,我提供一些自己认为对自己有用的习惯。欢迎大家提供更多。 1,尊重同事 在公司环境,同事天天见到,无论是新同事还是老同事,无论是资深的领导、专家,还是新入职的毕业生,我们都要足够尊重他们。 因为每个人都有各自的优点,这些优点是你在职业环境中能受益的隐形好处。如果能从同事群体中时刻接收优点和灵感,无论对自己的职业还是生活,都会是一个极大的帮助。 而学习的起点,就是要足够尊重。 如果因为同事不修边幅、胖(lol)、年轻、老、孤僻等任何因素去不尊重他们,是很蠢的行为。 世界本来就是风景处处,生活有多精彩,取决于看风景的人选择的角度。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档