首页

界面设计中的那些版式-图版篇

博博

这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。


    作者:王铎(Micu设计)


    这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。

     

    界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率。留白就是为了凸显层次、突出内容。

    手持设备屏幕较小,决定了信息显示是有限的。用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少。妄想满屏都是信息是不可能的。用户越来越受不了满屏的信息了。

    让用户接受该接受的有效信息,是关键。

     

    在设计界面的时候,因为内容和页面都比较多,为了保证页面与页面的统一性,首先需要设定页面内容四周的留白。在设定页面的间距后相应的内容图标,图片等的安排就确定下来了。用这样的方法能使调整出来的页面更为条理化。

     

     

    红色色的部分就是内容。在页面中一般会有导航的存在,那么内容区的版面是从导航下面计算的。

    界面四周增加留白。这样的界面很容易集中用户的视线到少数的内容上去,突出了焦点,整体给人一种典雅高级的感觉。

     

     

     


    反之,缩小留白或者不留白,页面会显得更丰富更充满活力。而图片的展示空间会增加,冲击感增强,让界面更显得富更有张力。

    根据页面的内容不同和功能点,适当的调整界面周边的留白非常重要。一般图片本身比较有意境,可以直接采用“出血”的方式,不留白或者少留白。

     

     

     

     

    下面介绍一些版面的小规律、小技巧。

     

    1.取其精华,一块颜色也能定天下!


     

    提取主要的信息,通过对整个页面的颜色进行调整,从而提高版面使用率。将一个或多个功能点作为主信息,提到首页中进行设计,从达到想要的视觉效果。这样处理后的界面设计不仅能显得大气有张力,而且展现出来的信息聚合度高。

     

    在缺少图像素材的情况下,如何让界面显得有张力,整体感强,呈现出来的版面率高。

     

     

    单色背景留白,凸显主要信息。要求图标或者文字,相对简洁,能够很好地和背景色融为一体。再通过线条和规则的图形来分割留白区域,增加层次感。

    做好这些的前提是,设计师要明确主要信息,以及它们之间的关系。 

     

     

    结合产品特点巧妙的运用大色块,将变化的信息用颜色区分出来。让用户最直观的感知信息的变化。

     

     

     

     

    2.多色块灵活分割,加强内容使用率



    图片素材少,还可以采用多色块进行分割,让界面显得不那么单调。

    加强内容使用率可以通过色块(临近色或是互补色)的延伸或是图像的重复来组织页面版式。将图片和色块进行统一化排版布局,整体基调能使页面丰富化。图片与相同大小的色块可以保持界面的统一性与简洁性,色调的一致的统一性和连续性使页面更为整体,这样看起来的页面就像一张图片一样有张力。并且这种方式让用户感觉点击的区域也会增加,从而操作也变得便捷起来。

     

     

     

    3.构图不拘一格,找到最合适的内容版率。


     

    横向和纵向分割,使界面显得整齐、稳定,而斜向分割让界面冲击感强。

    使用不同的构图方式,穿插性地将少量的图片整合在构图的形状中,能让界面变得活跃而富有活跃性。这样的表现方式还能将产品的气质融入进去,淋漓尽致地展现。有节奏感的设计更为取巧地加强了版式率。在界面设计中,图文的穿插可以引导用户的视线,让原本简单的内容变得有趣。在层次上,也可以区分内容的主次性,让阅读更加的轻松。

     

     

     

     

     

    4.简约化桌面或主页,让界面越近越美


     

    常用方式:图标、加大文案字号、序号、数字等来达到加强版式率的运用,提高视觉上的丰富性。

     

    图标表达

     

    人们越来越认同扁平化,一方面是因为扁平化的图标看上去清新简洁,用户理解快。另一方面,与图标搭配的背景更加单纯,要么留白,要么炫简,尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节,而是着重凸显有效的信息。

     

    图标是最为直接的表达方式,简单明确的图形,能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰,功能明确。

     

     

     

     

    信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分,也能好的将软件的特性和品牌展现出来。

    把图形融入到界面中,可让内容更为丰富,层次更加的分明。

     

     

     


    5.突出重点文案,调整版面率,让信息更清晰。

     

    调整文字大小将调整版式的使用率,使原本空的界面内容显示的更为饱满,用户阅读起立更为直接。使用较大的字号进行加强页面使用率能让页面显得更为信息。突出重要的引导文案,加强了软件的情景感和带入感。快速引导了用户对功能的理解,从而准确的使用。

     

    在页面中我们可以强调重点数据或功能词等来区分界面中的层次感。让用户的视线更为集中。

     

     

    6.串联图片,让它们讲故事,视图化版面。

     

    这种设计方法更多的是将文案用图形或插图展现出来。在数据页面和引导页中最为常见。

    一段文案一副插图的引导页更为有特色,给用户的情怀感更强。这种设计手法也是最容易体现产品特质和吸引眼球的。图案的易读性高,能在极其短暂的时间内快速传达给用户信息。用图像来讲故事,是设计中最根本的表现方法,也更是最为受欢迎的表达方式。

     

     

     

     

     

     

     

    图在界面中的运用

     

    三种方式:抠,边界关系,残缺

     

    1.切抠弄,制造纯色留白!



    在处理图片素材的时候,常常会碰到图片背景杂乱,产品不够突出的问题。在设计之前我们可以对素材先进行处理,将产品直接抠出来。利用这种方式可以找到产品的形状,越明确的形状越能反映用户对产品的认知度。产品的独特性能快速明确的表达给用户,用户从潜意识第一时间的判断到产品的类型和使用特性。

    下面是一个曲奇饼干的网站,将主饼干的勾出来,进行层次感的区分。在产品介绍中采用了侧面的实物抠图,体现出了曲奇饼干最为真实的厚度。运用碎落的饼干块虚化拉开产品的层次。深色的背景与饼干对比强烈,直接凸显了实物的形状。让用户一目了然,食欲大增。从而增了用户的购买欲望。

     

     

    在很多的电商APP中也常采用抠图,去除多余杂乱的信息,利用产品的形状直接体现不同商品的特点。这样的界面用户阅读起来轻松愉悦。

     

     

     

    2.建立边界,再打破边界,破出重围

     

    如果需要展示的信息较多,采用分割区域的方法,可以使界面显得整齐干净。而当信息较少时,设计师可以大胆选用“局部出血”的方式,建立边界,再突破它,增加层次感和冲击力,以凸显主题。

    一定要记得设定好的内容范围是为了让页面显得整体化,而不仅仅是摆放和拼图。

     

    在网页设计中有时候会见到这种方式,其实在手机、平板等UI设计中我们完全可以套用。

    运用图片的穿插来区分背景和产品或形象的层次感,处理完的界面更加富有生命力。放大需要突出的主形象,把它作为第一焦点展现在用户的眼前,有种强烈的“面对面”感受。

     

    在APP中采用将图片局部突出出来,能拉开信息的层次,将需要突出的图片信息第一时间展示给用户。一方面可以方便和引导用户点击,另一方面在上下滚动的长副瀑布流里,适当地打破平衡,可以丰富页面的节奏感。

     

     

     

     

    在ICON的设计中我们也常用到破图的方法。在统一的圆角矩形中,将表达寓意的图形局部超出,使图标更为有空间感和灵活性。

    采用这种方式设计的图标空间感强,层次感强烈,能使产品形象显得更为突出。

     

     

     

     

     

    在字体中也经常运用到破图的方法,让字体更为生动。在破字的过程中也能引发出不同的创意点。

    大美青海字体设计我把数字9破出了方块。而在优车尚品字体的设计中,我通过品字的破图找到了车的联想,让整个字体设计的更为贴切灵动。

     

     

    3.冲出画面,只保留局部,让产品再大一点!


     

    有时候,我们拿到素材,在处理后发现,图片比较平常,用户一眼就知道是什么。这个时候,可以考虑保留局部的方式,营造残缺美,增加时尚感。不要小看用户的的脑补能力,当然,这种方案还是要与客户或者产品经理及时沟通,残缺美不是所有人动能接受的。

     

    我们将图片进行放大,找出产品特点。选择能撑起整个页面构图的位置,切除不必要的图形,让图片冲出画面!这样处理后,页面显得非常富有张力,激发了用户想看到产品整个形象的欲望,起到产品预热的效果。

     

     

     

     

    在WATCH的预热官网中,设计师将图片放大,裁取有特点的部位进行展示,引导了用户点击观看产品的整体形象,激发了用户更多的去了解产品的特性。

    从版面角度看,局部放大裁切图片,增加了留白,增加了版式率,让整个页面显得饱满,微距的效果使用户与产品更贴切。

     

    这一篇主要理顺了一下版面和图形使用知识,并不全面,大家还是以欣赏为主。看完了能有个留白、破图的印象就不算白看。

    设计大方向上的东西终于絮叨得差不多了,我知道其实大家都懂,就是不知道从何下手而已,下一篇来点小方向的实用东西,欢迎大家留言。

    文章来源:站酷   作者:micu设计

    分享此文一切功德,皆悉回向给文章原作者及众读者.

    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI设计师交互设计-如何写好产品体验文档

周周

文章将分为6部分

1、撰写文档的目的

2、什么样的产品值得体验

3、产品体验类型

4、产品体验文档应该包含的内容

5、文档质量的评判标准

6、体验文档和竞品文档的异同


一、撰写目的


首先要理清楚,我们为什么要写产品体验文档, 是工作需要?还是兴趣使然?
明确写作目的才不会迷失方向,不知道自己在写什么,应该写什么。 


其次,要 明确文档的受众是谁。 
好的文档,是写别人想看的内容,你要明白受众想要看什么内容。 

二、什么样的产品值得体验


1、与你工作相关的

如果你是做平台型电商,那么淘宝、京东这些你就得去体验体验。


2、上热搜、应用商店登榜

例如之前大火的啫喱,一度在APP Store的热度超过微信、抖音,作为产品经理就很有必要下载体验一番,琢磨一下它爆火的原因,提升自己的产品感觉。 

3、新颖的商业模式

例如之前QQ音乐,在听歌过程中给用户插入广告播放,虽然极度恶心,但确实是一个比较新颖的商业模式。。。 


4、新颖的交互模式

例如现在有很多APP的开屏广告,直接使用手机的重力感应器,用户稍微摇动手机就会跳转到对应的广告页,不需要用户去点击。 
虽然我觉得这种交互方式挺恶心的,但在不同的场景下,其实也有可借鉴之处。 


5、新颖的解决方案

例如之前房产平台推出的3D实景看房,用新的方式更好地满足,用户想直观了解房屋布局的需求。 


三、产品体验类型


1、深度体验


特点: 多角度、深挖产品细节。 
这意味着,我们需要投入大量的时间和精力,持续做很多案头工作。 

哪些产品适合我们去做深度体验呢? 
个人建议是:经久不衰、行业TOP 10、与你工作比较相关的产品。 

全面体验这些产品,可以在很多方面带给我们灵感。 
例如从0到1它是怎么做出来的?1到100的推广它是怎么完成的?100到正无穷的行业壁垒它是怎么形成的?...... 

相信我,花一段时间去持续研究这些产品,一定收获满满。 

2、快速体验


「快餐式」体验,特点: 短平快。 
当我们想了解一些产品有趣的表现层、交互层设计时,就可以用这种方式,花个1-2小时把玩,记录你觉得特有意思的点。 

四、文档应该包含的内容


接下来,阿G将通过分析「善诊」这款APP,和大家分享一下,好的产品体验文档应该包含的7部分内容。 

注意: 我们不是为了写文档而写文档。

1、体验环境


1)产品信息,通常会包含

  • 产品名称 
  • 产品logo 
  • 产品版本 

2)体验信息,通常会包含

  • 体验人 
  • 体验目的 
  • 体验时间 

3)系统信息,通常会包含

  • 体验系统 
  • 体验设备 


撰写体验环境的 3个注意事项: 

1、产品版本 
不同环境,版本可能不一样,导致功能、界面等差异。 
例如善诊,截止文章发出前,苹果最新的版本是2.7.0,小米最新的版本是2.6.0,华为最新版本是2.6.9,所以写的时候最好备注一下。 

2、体验时间 
可以是持续一段时间,特别是深度体验时。 

3、写体验环境的目的 
为了让读者(包括自己)清楚了解所体验产品的基础信息,方便(日后)翻阅。 
特别是体验目的,  很清晰地让读者知道, 为什么要体验这款产品,体验这款产品能收获什么。 


2、产品概述


1)产品类型

写清楚产品的类型和形态,例如善诊是一个中老年健康医疗服务平台,专注在移动端。 


2)Slogan

一个产品向外界传递的产品理念,例如「父母健康找善诊」。 


3)产品介绍

通过体验产品和查阅公司/产品的资料,为读者提炼产品特点,介绍产品的主要用途。 


4)产品历程

按时间线,介绍产品一些重大事件。 

以上信息获取渠道:
1、公司官网(特别是B端产品,官网会给你安排得明明白白) 
2、应用商城相关的产品介绍(注意灵活使用搜索引擎,哈哈) 


3、用户分析


1)用户画像

一般会从人口学、社会学角度,放一些用户的年龄分布、地域分布、学历、性别占比等数据。 
具体还是要以体验的产品类型、所处行业为准,把需要呈现给读者的重点信息放出来就好,不用贪多。 


2)用户需求


3)使用场景

通过行业信息、产品功能、用户画像,结合自己的思考,提炼重点用户需求和使用场景。 
很多时候,我们不熟悉体验产品所处的行业,不要紧,可以猜,然后通过和他人交流、查阅资料,修正内容。 


以上信息获取渠道:
1、用户画像:百度指数、头条指数,或者行业报告 
2、需求和场景:行业报告 + 体验产品(当然如果你身处于行业之中,就可以依据经验来做一些总结) 

4、商业模式


1)模式概述

详细描述一下公司/产品的变现方式,最好可以图文 + 数据。 


2)模式优势

每一个产品能活下来,都有能够形成闭环、具备一定优势的商业模式。利用搜索引擎查阅相关资料,再加上对产品的体验思考,剖析、学习其商业模式,有助于培养我们的商业嗅觉。 


以上信息获取渠道:
行业报告 + 新闻报道 


做产品,可不仅仅是为了情怀,首先你要考虑的是,如何活下去。


5、市场表现


1)市场/用户规模

产品在所处市场的占比,或者用户规模,可以侧面验证它是不是一个好产品。 
这里的「好」不仅是用户体验好,更是真正解决了一些行业/用户的需求。 


2)融资情况

资本是最敏感的,一个产品有没有前景,融资情况会很坦白地告诉你,哈哈。 


以上信息获取渠道:


1、市场/用户规模 
  • 上市公司,可以看一下财报,里面真的啥都有...... 
  • 非上市公司,那只能去官网瞅瞅,或者通过搜索引擎,看看对应的小道新闻或者行业报告 


2、融资情况:企查查 

6、运营体系


1)版本迭代

为什么要看产品的版本迭代? 
任何产品的迭代,都是基于内外部环境变化引起的策略调整,我们可以通过观察某个产品的迭代情况,培养我们对市场环境变化的敏锐度。 
同时可以通过历史版本迭代,思考产品的迭代逻辑和规律,看看是否有可借鉴之处。 


2)增长转化策略

结合时间线和版本迭代记录,思考体验产品的运营策略是如何完成其用户/销量的增长转化。 


以上信息获取渠道:
版本迭代:七麦数据、App Annie(付费) 

7、功能体验


1)核心流程图

通过把玩产品,梳理出最核心的业务流程图。 

2)信息架构图

信息架构图,简而言之就是把产品主要对象的属性列出来,与页面、交互都无关。(后面可以再单独出一篇和大家聊聊信息架构图应该怎么画) 

3)特色功能

可以找一些你觉得最有意思,最特别的功能,并做简单介绍。 

4)产品建议

在体验产品过程中,觉得哪些地方可以改进,具体说一下问题点,分析问题点可能产生原因,再提出有效的改进建议。 

8、总结反思


对比自身

思考一下体验产品上某个亮点,如何能和自己负责的产品进行有效结合,站在巨人的肩膀上看世界。 

上面说的7部分内容,是不是每次写体验文档的时候,都应该有? 
当然不是,我们应该根据体验目的、体验类型、产品类型,适当地做一些裁剪。 

五、文档质量的评判标准


围绕着体验目的和读者感受,可以把产品体验文档的质量评判标准做一个总结。


1、通用(两种体验类型都应该有)

1)体现产品核心价值

2)抓住产品重点

3)体现产品特色

4)结构清晰

5)格式美观

6)思考总结


2、深度体验可以有

1)详细数据支持

2)商业模式分析


六、体验报告和竞品报告的异同


很多小伙伴会把产品体验报告和竞品分析报告搞混:都是对产品进行体验和分析,除了名字之外,到底有啥区别?


我们从「异同」两个方面来分析,看看它们究竟有啥区别。


1、异


1)目的不同

竞品分析文档是对竞品做分析,常用SWOT模型,将自己和竞品做对比分析,学习借鉴。而产品体验,不一定是竞品,可能只是你个人感兴趣而已。


2)范围不同

竞品分析文档,一般仅限于输出竞品的思考总结,而产品体验的范围更广。


3)深度不同

产品体验可以浅尝辄止,但竞品分析不行,竞品分析需要透过现象看到本质,观察竞品的一举一动,配合市场动态,不断调整我们自身产品方向,甚至是公司战略定位。


2、同


产品分析报告和竞品分析报告,除了都是对产品进行分析之外,还有一个共同点:我们要 做自己。 
不管体验的产品多厉害,不管竞品多无敌,我们都是抱着学习、借鉴的心态去分析,去思考问题。 
每个团队、每个产品诞生的环境都不尽相同,纵然其他产品做的再好,我们也不能「全盘皆抄」,要时刻保持初心,做自己。 


好了,产品体验文档如何撰写,阿G就先聊到这里。 

其实产品体验的整个过程,最重要是以下几点思考: 
1、如果你是这个产品的产品经理,你会用什么方案去解决重点用户的需求?
2、你的方案和现在产品方案的差异点在哪里?
3、为什么会有这些差异点?

4、方案对比的优缺点各有哪些?


不管是C端还是B端,不断思考这几个问题,相信慢慢就提升自己的产品Sense。 

多体验、多思考、做自己、少纠结模板

文章来源:站酷 作者:阿G聊产品

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



echarts设置柱状图柱状图粗细大小

前端达人

主要属性:

 //设置柱状图大小
                    barWidth: 20, 
            
  • 1
  • 2

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>柱状图大小</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: '柱状图'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                      //设置柱状图大小
                    barWidth: 20,
                    //设置柱状图渐变颜色
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 处的颜色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 处的颜色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
                }]
            });
        </script>
    </body>

</html> 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

css 设置tr的边框

前端达人

有时候有设置tr边框的需求,写下如下css

tr{

border-bottom: 1px solid red;

}

发现不起作用,后来在w3c上查了查,原来只有table,th和td有独立的边框,tr并无边框。

但我想实现每一行都存在下边框,其他边框不存在,该怎么办呢?


有两种实现方法:

方法1:

table{

border-collapse: collapse;

}

tr{

border-bottom: 1px solid red;

}

解释,border-collapse: collapse; 将table,th和td的边框合成单一的边框,此时在使用tr就可以达到目的。


方法2:

先在table标签里面设置cellspacing等于0,

<table cellspacing="0">

然后,

td{

border-bottom: 1px solid red;

}

解释,如何不设置cellspacing等于0,直接设置td的下边框,则下边框会不连续,因为cellspacing不为零,单元格于单元格之间存在间隙。




转自:csdn

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人


1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 

参考:uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



2022年,B端设计的趋势有哪些?

seo达人

视觉趋势

1. 3D设计风格

虽然 3D化 的视觉风格早已到来,但是在B端市场上,3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B端视觉设计师 的基本要求。

而3D风格用在B端软件当中,会有两个使用场景:

 

图标

因为在B端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”。

许多的抽象词汇,很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画 这一条路。

图片

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱 等页面,因此 3D 图标的出现,它的应用场景也会相比之前 要更加的广阔。

图片

 

可视化大屏

大屏设计 也在不断的“内卷”,因为传统的 2D 可视化大屏 所搭建出来的大屏已经满足不了企业的野心, 像DataV 腾讯云图 ,大家都在朝着 3D风格 炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求 激增,而 3D 建模仿佛就是大势所趋。

图片

 

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟,感觉它在B端视觉领域(特指的是 官网 ),是非常受到欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为B端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作 给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上,大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

图片

 

3.开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多B端设计初学者,有了更加完整仔细的B端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

图片

就清晰的讲清楚了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是B端设计的入门学习。

而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统,进行对比,或许会有一番收获。

 

产品趋势

超级app

这里的 超级app 可能和大家潜意识里的 支付宝、微信 这些软件不太一样。

在B端行业,随着疫情的不断扩散、再加上了两年时间的发展,很多B端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为B端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着B端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的 飞书管理后台、薪人薪事 等等诸多B端产品,它们在整个导航内容上,已经增加到一级导航 15+  、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

图片

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的 导航菜单 设计方法,有机会咱们重新梳理一下 导航菜单 的内容,将B端设计指南 文章进行更新。

图片

 

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在20个月内推出了60款应用程序,开发过程加速了两倍,仅在第一年就节省了650人天的工作量;在2012年即将推出Model S之际,特斯拉放弃了SAP的ERP产品(可以思考一下为什么),改用低代码开发平台Mendix,用25个人四个月时间自建ERP系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

图片

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何能够让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

 

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如CRM,其实只是一个笼统的称呼,现在CRM市场又会分为 SCRM、运营CRM,等诸多产品。

PaaS类的平台也出现了 负责从虚拟主机和数据库层面入手的 iPaaS 以及 从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

图片

因为B端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。

因此你会发现,虽然产品形式都会比较相同,但是B端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。最近拖更确实比较厉害,准备之后几天给大家抽些书,可以多留意留意公众号的文章。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》2022年,B端设计的趋势有哪些?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何做出高级感的单字母LOGO?

seo达人


 

图片

 

朋友们晚上好,我又来了!又到了夜深人静的时刻,都饿了吗,哈哈哈~给大家看这个图片的初衷并不是想激起大家的食欲,相信大家都知道上面这个图形就是饿了么的品牌标志。一个小写字母e,通过倾斜变化和切割,形成了一个吞噬食物的图形感,可以说灰常的简约精致。嗯?到底想干啥,不着急,我们再看几张图。 
图片 
 
Timi~啊,多么亲切可爱的声音,我已经好久没有听到了,十分怀念,但是这不重要,我们看一下腾讯游戏的 logo,以灵感火花为设计创意出发点,用一个个放射几何图形组合成了字母 T,让这个 logo 拥有了无限可能。
图片 
 
这个标志大家一定不陌生,WPS 的软件大家每天都在用,可以看到它通过线段的不断穿插形成了一个造型优美的字母 W,既是一本打开的书和笔又是一个象征职场的衣领。
图片 
你怀念 18 年的那个夏天吗,有纸短情长,有体面,有带你去浪漫的土耳其,还有起风了……是的,抖音这几年的火爆为我们带来了无数经典的回忆和感动……扯远了,设计师没有感情,我们看一下抖音的 logo,故障风的表现形式营造了抖动的立体感字母 D,同时也是结合了音符的造型,兼具了平面图形简洁和立体图形的美感。 
 
 
图片 
 
啊,这不是我们吃饭的家伙么……Adobe 的 logo 大家再熟悉不过了,我们看一下它的结构,将一个极简的字母 A 融入到了一个正方形里面,弥补了 A 的上部空缺,整体更加大气稳重。 
 
 
图片
特斯拉近几年也是颇受年轻人的喜爱,我身边的很多朋友都入手了,推背感恐怖如斯!看一下它的 logo,由字母 T 变形而来,造型尖锐,且融入了方向盘等创意元素,与特斯拉主营的电动汽车产品相吻合。 
 
 
图片
确认过眼神,是我死去的青春。如今再看到这个 logo,满脑子只有它的设计创意,没错,通过正负形的方式将 Z 字母融入到了星星里面。看着这个负形 Z,有没有想起你曾经的年少无知和情窦初开?在哭了,在哭了……
行了,青春也回忆了,生活也复盘了,咱们也就不藏着掖着了,今天我们探讨的主题就是让广大同学们头疼难受的单字母 logo!当然了,主要是安利一些它常见的表现手法。 
 
 
单字母 logo 在表现的过程中还是比较困难的,因为他不像多个字母可以有多种的组合变化,想想看,两个人生一个孩子还是比较容易的,通过两者的友好交融或者其他的各种各样的姿势都可以完成,但是你一个人想要生一个孩子,那还是十分困难的。所以,如何把一个简简单单的字母做出差异化、符号化,同时兼顾识别性,是很多朋友十分困扰的问题。那到底如何做好单字母的 logo?
我们回过头来再看一下前面的几张图,其实已经给到了一些答案。  
 
 
图片
当然肯定还有其他很多种办法,这里列举的六种是我认为最常用最出效果,也最适合初学者上手的方法。当然,这些方法都是可以互相结合使用的。
 
需要注意的是,识别性永远是字母标志的首位的条件,我们在设计图形的时候要首先抓好字母的特征,保证它的识别性,然后再进行设计手法的选择。
 
行了,方法给到胃了,注意事项也明确了,下面就可以开吃了……我们用这几个方法分别品尝一下,看看究竟味道如何!
  
 

图片

所谓几何图形的应用,就是字面的意思,利用几何图形的规则性和延展性不断地进行重复排列和大小对比,这种方式做出来的图形往往更具精致感和图形感,我们多看一些案例就可以摸索到其中的规律。 
 
 
图片 
 
OK,其实方法有很多,首先第一个案例我们用一个比较快捷的方法,就是网格绘制大法!先绘制出统一角度的网格,然后用【形状生成工具】或【实时上色工具】在里面进行绘制,这个方法的好处就是它会帮你统一好角度,角度统一了也就自带了规则性,我们用这个方法做一下 E 字母。
图片 
 
是不是很方便快捷,又很容易出效果呢,这个角度不一定非得是 60 度,可以根据你的喜好来定,需要注意的是绘制好后不要容易满足,最好再进行二次创作,这样才不容易撞车,做出更多有趣的创意,总之,多尝试一定没错。 
 
图片
 
 
接下来我们再玩点儿好玩的,尝试用一些不规则的图形来拼接排列成新的字母图形,话不多说,看一下下面的案例。
图片 
 
 
是不是打开了新世界的大门,这特么竟然是五角星变来的?其实五角星也好,六角形也好,都是借助了他们特有的角度和边来进行组合,最终我们的目的还是要达到字母的识别性,大家可以用这个方法自己尝试摸索一下。
图片
小结:我们在进行几何图形排列的时候切记,不一定非得是用矩形、圆形这些正正方方的图形,像三角形、椭圆形、梯形等各种图形都可以大胆的进行尝试摸索,最后呈现的结果一定不要太复杂,用最简单的方式来诠释。
 
 
 
 

图片

 

 

线条是个好东西啊!它们交叉在一起会产生千千万万的变化!无论是什么类型的 logo 这个方法都很受用,我们来看一下单字母的线条穿插都有哪些特点。
图片 
 
可以看到大部分的案例也都是基于比较规则的几何图形来做出的,都是比较简洁干净的呈现,可见想要做出高级感,就不能过于复杂!我们在设计的时候首先注意提取字母的识别性,其他的事情,插就完事!来吧,我们先做一个 X 找找感觉。 
 
图片 
大家注意到虽然我在过程中有用到内部的双线结构,但是也只是提取了需要的部分,最后并没有保留过多的内部线条,这样会干净耐看很多。
图片
ok,非常耐斯,我们再玩稍微难一点的,上面的 X 是先画出字母的结构然后进行设计,下面我们试一下先堆积几何图形,然后再用线穿插出字母的结构。 
 
图片 
 
怎么样,是不是相当的神奇!这特么也可以?没有什么不可以,只要你试的够多……这个方法虽然不容易做,但是却能挖掘出线的更多可能性。
图片
小结:无论是先从字母的结构出发,还是从图形出发来挖掘结构,都建立在规则的图形和字母识别性之上。 
  
 
 
图片 
 
为什么是立体效果平面化处理呢?因为单纯的立体 logo 会偏单调一些,且多数需要添加渐变来呈现,但是很多同学又玩不好,就容易变得很 low,所以这个方法就是在平面图形的基础上,做出立体效果的感觉。
图片 
 
看完这些案例,是不是能 get 到一些了呢?不多说了,我们案例走起,这里也是介绍两种思路。首先第一个思路就是先画出立体图形的平面结构图,然后通过删减线段和提取结构面的形式来得到字母的识别性,ok,我们先用 H 试一下。 
 
图片 
 
可以看到当我们画出立体圆柱的时候,中间部分似乎就已经形成了一个 H 的造型,这个时候我们再进行创作的时候,自然就简单很多,所以根据字母的特点选择合适的立体造型,也是十分的关键。
图片 
 
好的,第一个思路就是这样,下面我们看一下第二个思路!先画出平面的图形,然后在内部寻找立体的可能性!啥意思呢,我们来看一下案例。
图片 
 
明白了吧,先画出字母的平面图形,在它的结构内部或者负空间部分进行立体的造型创意,这里是为你打开了一扇创意之门!当然你也可以尝试其他的造型。
图片
小结:我们可以先画出立体图形,然后去提取字母的识别,也可以先画出字母的平面图形,再去创造立体图形,都可以,但是尽量做得简约一些,巧妙一些,扬立体之长,避立体之短! 
 
 

图片

Buff 这个词真不是白用的,假如你是一个菜狗,有了 Buff 你就可以在野区各路横着走。同样的,无论你做的东西是什么狗屎,加入了外框后,会掩盖很多味道,也会增添很多味道……当然了,狗屎也分三六九等,你不能做的太辣眼了,不然啥 Buff 也拯救不了你…… 
 
图片  
 
 
这里我们接着介绍两种利用外框 Buff 来设计的思路。首先第一个就是先画好字母的造型,然后加入外框并与之进行呼应连接,我们来看一下设计过程。
图片 
 
 
这个方法也是各类 logo 设计中都比较常用的,如果你的图形不够稳定,又或者比较单一,可以试试加入一个外框,需要注意的是我们最好让图形与外框能有所呼应,这样往往才会更加的舒适耐看。
图片 
 
 
ok,接着介绍第二个方法,就是先画出外框,然后在里面进行图形的绘制!我们看一下下面案例。
图片
这个方法的优势就在于我们先给到了外框,相当于这个字母是含着金钥匙诞生的,天生自带稳定性,这谁受得了!当然这个方法也最好要与外框进行呼应一下,比如该拉圆角的部分和适当突破出来的部分,所以这个方法告诉我们,就算你是个富二代,自己不努力,也只能是个有钱的废物!(嗯?好像大家都挺愿意做个有钱的废物的…)
图片
小结:做 logo 就和品人生一样,如果你出身普通,那就通过自己的努力给自己的人生套上 Buff!如果你生来优秀,也请猥琐发育,好好利用自己的资源。成功没有好办法,努力是唯一的捷径!
 
 
 
 

图片

什么叫结构的变形替换呢,通俗一些讲,就是把羊头换成狗头,把猪尾巴换成龙尾巴…这么讲好像有些暴力,其实就是利用字母的正形部分,结合行业属性进行创意结合。
图片 
 
这个方法非常好用,但也容易用得过度,很多同学在做的时候容易做的复杂,比如结合一条龙,你把龙须龙爪龙鳞统统都画出来了,那不扯淡么,我们只需要提取结合的物体的基本造型即可,龙就是龙头,鲸鱼就是尾巴。
我们在设计之前最好先把一个大体的思路和想法画出草图,然后再进行上机操作。第一个案例我们做一个 Z 字母结合凤凰的创意,看一下设计过程。 
 
图片 
 
这个构成方式主要就是拼你的结构!想要做的精致一些,线条必须流畅,注意看头部与 Z 字母结合的部分,都要处理的非常丝滑~当然如果你觉得造型还是有点死板,也可以加入渐变,让整体更生动灵活。
图片
那有的同学可能会讲,我草图画不好,或者说字母画的非常的丑,结合啥也不好看,那咋办呢,这里再给大家讲一个比较快捷的思路,就是用字库的结构进行二次创作!
尤其是一些手写字库,它往往具有更多变灵活的结构,相信大家的电脑里一定装了很多乱七八糟千奇百怪的字库,平时不用,这个时候就可以用起来了!
图片 
 
怎么样,有的时候并不一定只能融入一个元素,在不影响识别性的前提下,利用每一处的结构,都能产生不同的感觉,当然了,你不能瞎结合,都需要和行业相关才行!
图片
小结:我们在进行创意结合的时候,首先要进行大量的思维扩散,毕竟创意不是凭空出来的,然后要简化创意元素,和字母的整体调性搭配起来,才能做出更整体精致的图形!
 
 
 
 

图片

正负形就不用过多介绍了吧,是最出效果也是最好玩的一个创意表达方式,因为基本上每个字母都有属于自己的负空间,而这些负空间,就是你达到创意高 c 的入口…… 
 
图片 
 
 
其实找到负形并创意结合并不难,难得是如何做的高级,所以又回到了我们前面的一些方法,几何化、规则化,都是不错的选择,ok,我们用 Q 字母来尝试结合一下小鱼的造型。
图片 
 
这个方法就是在几何图形的基础上进行字母的结构识别和创意设计,但也是比较难的,因为有时候不一定你就能搞出来你想要的那个创意,这个时候就不要强行进入了,适当放弃,柳暗花明又一村,换个创意,又是一条好汉。
图片 
 
那还有一种方法就是先画出字母的结构,然后利用负形部分就行结合,我们试一下 F。
图片 
 
这个方法就相对简单一些,但也尽量将字母做得秩序规整,整体才不会太乱。另外上面这两种方法最后都加入了一个眼睛,也就是点睛之笔,这样会更生动传神,毕竟画鱼点睛和画鸟点睛都是历史上著名的经典桥段。
图片 
 
小结:每个字母合适的负空间都基本上是固定的,做的多了就找到规律了!
 
看完这么多案例,有没有勾起你的创作欲望,觉得我又行了呢?其实单字母 logo 的应用范围还是很广泛的,市面上很多品牌尤其大型企业往往都喜欢这类的设计形式,因为它会让受众群体很容易的对品牌名称进行联想,形成品牌符号的记忆性。
比如麦当劳的 M、李宁的 L、饿了么的 e,甚至是超人的 S,当你脑子里现有它们的名字时,再看到图形就会不自觉地对它们进行连接,形成品牌记忆。
好了,出了这么多个案例,我累了,你也累了,希望下次再遇到单字母困境的时候,可以想起今晚我们一起度过的种种片刻,最后国际惯例,合个影,我们结束。 
图片 
 

 
作者:告白天
 
转载请注明:学UI网》如何做出高级感的单字母LOGO?


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



Behance首页推荐的作品集为什么这么高级?我们能从中学到什么?

seo达人


图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

一次作品展示,想要视觉效果更高级,需要通过各种细节综合打磨。那么在今天推荐的这份作品中,我认为打磨比较好的细节以及我们可以从学习的主要有以下几点:

  1. 高级投影
  2. 投影的延展运用
  3. 留白艺术
  4. 合适的展示角度
  5. 强设计感配图

在我近期帮星友看的作品集中,发现很多人的作品本来还不错的,结果被糟糕的展示给减分了,很是可惜。我给不少人提的建议之一是先提升自己的审美,但他们遇到的问题是不知道看啥,判断不了哪些才是好的作品,以及怎么用到自己作品中去。这些问题不知你是否也有遇到?如果有同样的困扰,今天的文章一定要看完了,因为全是干货。

所以我在星球中利用审美打卡,每天帮大家搜集一些比较好的展示方式作为参考,同时提升审美,一举两得。这组Behance高级作品就是在打卡中给大家做的分享。接下来,我将逐个分析这几个细节部分,方便用到咱们自己的作品集中。

 

1、高级投影  

投影的本质就是给画面打造空间感,并突出界面内容,对于这一点我后面也会做一些延展,可能会有一些观点你没听过的。在看作品集的过程中我有发现很多人不注意投影的运用,但它其实是非常重要的作品加分手段。

 

1)投影要干净轻盈

投影在取色的时候,可以选择与背景颜色相近的颜色,然后略微加深一些,不要用纯黑色来做投影,会显脏。投影的颜色永远都需要结合环境的颜色,就想象成界面中有一个太阳光打过来,会反射周围的环境色,所以带有环境色的投影会显得更自然。

比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相,只是把饱和度降低到了很浅的程度,看起来就很舒服。

图片

再比如我之前做的一个banner,右边的卡片堆叠的效果,叠起来的投影层就是用到了蓝色的投影,看起来就会显得非常干净。

图片

图片

另外,要注意投影的距离不要太小显得不自然,颜色太深会显脏。

图片

 

2)投影要针对特定的颜色进行微调

使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体,投影需要做得更强,而对于较亮的物体,投影应该是更浅一些。

如果不注意这一点的话,假设两个投影都具有相同的不透明度,那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。

比如下面的按钮投影透明度,投影透明度都是50%透明度时,白色按钮看起来会比蓝色的更深,可能要降低到30%左右才显得比较一致。

图片

3)投影要符合现实规律

高级投影应该要结合现实规律,做到近实远虚。

图片

上面这张图的投影就是有些问题的,更远的投影反而显得更深,其实应该要改的更浅一些才好。

做到这一点有2个小技巧:

  • 1)如果在PS中设置投影的话,可以通过调整PS的投影等高线。

图片

如果是在sketch和figma中做投影的话,也可以叠加多层投影来做,大家可以尝试下。

  • 2)在做展示的时候,弥散的范围建议在6倍左右会比较舒服,当然这个也更要根据你选的投影颜色和透明度综合来调整。

图片

 

2、投影延展  

前面提到,投影在做展示的时候,其作用就是打造空间感,围绕这一点我们也可以做些延展。

 

1)增加简单图形

在作品下面增加简单图形,既不干扰作品,又能通过穿插增加空间感。

图片

 

2)增加插画元素

用一些品牌插画,元素,甚至图标给作品增加穿插,增加空间感。

图片

 

3)增加3D元素

给作品增加简单3D元素,比如球、三角之类的元素。

图片

来自Behance,审美打卡

 

图片

我曾经做的界面包装

 

4)改变材质

把界面做成毛玻璃效果,再做穿插,进一步增强空间感

图片

图片

来自behance,星球审美打卡

 

5)深色界面

有人问,如果界面本身就是深色的怎么办?其实也是基于空间感的原理,给画面增加一些元素,与背景拉开关系就好。比如下面这样

图片

来自behance,星球审美打卡

 

图片

来自dribbble,星球审美打卡

 

图片

来自dribbble,星球审美打卡

 

3、大量留白  

想要提升作品的逼格,使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候,得到一个奇怪的说法,说是要把作品限定在多少页以内才更好。

我觉得这有的本末倒置了,作品要多放精华内容没错,但不是以页数来体现的,展示的时候还是以提升逼格为主,不要影响作品本身的视觉效果。每一页PPT,重点展示一件作品就足够了,物以稀为贵,像一些大牌奢侈品就特别喜欢大留白。

图片

Apple手机官网截图

 

图片

香奈儿官网截图

 

举一个反例,下面是某位星友的作品,其实这样的网页展示,一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大,如果太类似的话,放一页就够了。如果网页比较长的话,可以按分屏来展示。

图片

星友作品截图

 

就像开头的作品那样调整下,逼格立马就能上来。

图片

 

4、展示角度  

作品在做展示的时候,不论是自己设计还是用样机,有一个标准就是一定不能让人看不清细节,不能做了角度变化之后丢失细节。

像开头的作品展示,都是用了一些相对没那么夸张的角度,这样做的一个好处是能看到细节,即使是想带一些角度,增强设计感的话,也一定要以能看到细节为标准。比如像下面这样就可以了。

图片

我也给大家举一些反例,比如像下面这位同学的展示角度就比较奇怪,其实像这种内容较多的界面,摆正就可以了,不然细节全都看不清。

图片

星友作品截图

 

5、高质量配图  

一个作品中的配图其实非常关键,甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候,很多人在展示的过程中不大重视自己的配图,我在跟星友交流过程中会发现大家对于配图存在一个误区,就是觉得配图一定要是真实的,有些人甚至觉得作品里呈现的一定是要去线上截图。

我想说,如果这样做会把你坑得很惨。原因有以下2点:

  1. 线上的图存在非常多不可控因素,所带来的视觉效果不一定代表你真实的视觉设计能力
  2. 审美是设计师的核心能力,如果你放一堆审美不在线的图,那别人有理由怀疑你的审美是有问题的。

既然配图这种重要,那怎么做好配图这个事呢?有几个小技巧:

 

1)符合调性

配图要符合产品的调性,像开头的作品中,黑白干净是它的关键调性,那么选的图也是这个范的。

图片

 

2)真实可信

尽量让配图看起来真实,别偷懒用重复的图,包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题,稍微花点时间就可以优化好了。

图片

星友作品截图

 

3)加强设计感

在放界面展示图的时候,界面中放的图尽量多一些设计感,体现你的审美。

图片

关于高质量配图我之前也有专门写文章《如何选到设计感强的配图,我总结了这7个实用方法》,文章中也分享了很多我自己收藏的高质量配图,大家有需要的也可以去阅读下载。

 

总结  

最后总结下,今天主要是从作品展示的角度,给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。

这些技巧操作起来很简单,但又非常有效,具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去,提升逼格,找到自己理想的工作!

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》Behance首页推荐的作品集为什么这么高级?我们能从中学到什么?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



12种超级好用的-免费渐变神器

seo达人

01  Cool Backgrounds

网站链接:https://coolbackgrounds.io/

网站介绍:Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集,内置5种不同的背景风格,每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式:左侧选择不规则形状、图形、渐变背景、图片等,右侧可以选择不同的色彩组合,选择适合自己的色彩风格后,点击下载即可。

 

 

02 180种渐变背景

网站链接:https://www.fengtupic.com/colortool

网站介绍:内含180种渐变配色方案,特别好看美观,适合各种场景模式下的背景使用。

使用方式:选择适合自己场景的渐变色,可拷贝css格式,也可下载png格式。

 

 

03 Pigment

网站链接:https://pigment.shapefactory.co/

网站介绍:可通过改变饱和度、色温和色系改变配色方案,还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度  亮度 颜色

选中和更多

使用方式:左侧可以选择不同的饱和度和亮度,选择其他色调,右侧放大可查看场景配色效果。

 

 

04 ColorSpace

网站链接:https://mycolor.space/

网站介绍:Color Space 是一款非常实用的渐变生成器,我们只需要选择一个颜色,就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项,可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式:上面输入色值,自动出来渐变方案,还可左右滑动选择适合自己的搭配方案

 

 

05 Adobe Color

网站链接:https://color.adobe.com/zh/create/color-wheel

网站介绍:可自由选择色环上不同的颜色值,依照类比、单色、三原色、补色等不同搭配模式进行搭配,下面展示一系列色值。同时可将看到的好的图片色纸上传上来,自动配比色值,同时,还能查看背景色与文字的对比度检测,非常适合网站多色搭配。

色轮

辅助工具

使用方式:滑动多tab滑块,选择色环颜色做不同类型搭配;利用协助工具查看文字与背景的对比检测。

 

 

06 BrandColors

网站链接:https://brandcolors.net/

网站介绍:这个网站是基于最大的官方品牌颜色做整理,包含了众多品牌颜色官网的配色方案,可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式:选择好相关品牌的色彩调性,可查看色值,可复制色值,也可以下载相关色值,超级方便。

 

 

07 Color Leap

网站链接:https://colorleap.app/home

网站介绍:一键生成复古风图片色调分离,可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式:选择年代,选择图片风格的配色方案,查看颜色,复制相关色调即可。

 

 

08 ColorBox

网站链接:https://www.colorbox.io/

网站介绍:ColorBox 是选择一个颜色,会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集,配色页面还有大量的个性化选项,满足我们的任何需求。

网站截图

饱和

使用方式:左侧可以添加不同的颜色分类值,右侧调整搭配的颜色系列和同色系和补色系不同选择,曲线直观展示出色调和饱和度的变化幅度。

 

 

09 Eggradients

网站链接:https://www.eggradients.com/

网站介绍:Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站,以鸡蛋的形式展现,支持一键复制。

预选颜色

渐变调色板

使用方式:选择适合自己设计场景的配色方案,复制即可。

 

 

10 CoolHue 2.0

网站链接:https://webkul.github.io/coolhue/sketch-plugin/

网站介绍:CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式:在sketch下载插件,直接点击插件,选择相关配色。

 

 

11 Free Mesh Gradient Collection

网站链接:https://www.ls.graphics/meshgradients

网站介绍:包含100多个免费的渐变色合集,支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式:可选择ai、eps、jpg、png格式,选择好看的渐变色下载即可。

 

 

12 Grabient

网站链接:https://www.grabient.com/

网站介绍:Grabient 一个非常漂亮且实用的渐变网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

网站截图

调整角度

调整颜色

渐变比例

使用方式:选择适合自己风格的配色方案,点开调整渐变梯度,下载即可。

 

最后感谢大家的欣赏和学UI网干货小组和学UI网解答团的辛苦整理;

后续仍然会给大家持续带来 #学UI网干货分享(其中包括在线配色网站、在线工具、插件等)

谢谢大家的持续关注!~

 

转载请注明:学UI网》12种超级好用的-免费渐变神器

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



交互设计:如何做到品质?

seo达人

01 怎样算是品质?

首先,探讨这个问题,意义何在?

笔者认为,有两点意义。

首先,作为用户,我们可以用到好用的产品;其次,作为从业者,我们可以找到学习的榜样。

明确了意义,我们再回到问题本身:怎样算是品质?如何判断?

个人认为,和周到一样,是否拥有高品质,也是用户的主观感受说了算。

在涉及体验细节的小需求上,避免所有的不周到,就是周到。

这是关于周到与否的判断,相对比较容易。但是关于品质与否的判断,笔者没有找到这么简单的判断逻辑。所以我们尝试换一种方法。

豆瓣的高分电影,比如《千与千寻》、《美丽人生》和《肖申克的救赎》,它们肯定存在不同之处,但同时也有一些共同特点(主人公都面临极大困境,但都心怀希望和目标,通过各种努力走出了困境)。

高分电影如此,高品质的交互设计,也是如此。

这一大段,就尝试去探索这些共同的特点,以便去发现、或者去验证,那些在交互设计方面拥有高品质的产品。

1 看着简单

之前在《以不变应万变:浅析信息架构》这篇中提过,只有简单,才能让用户马上找到掌控感、进而感觉良好。

高品质的交互设计,一定是要让用户感觉良好的,所以看起来一定是简单的。

 

2 用着顺

个人观点,互联网产品有两类较为特殊的初级用户,一类是零经验的三岁小孩,一类是智能手机之前没怎么接触过互联网的老人。

一般情况下,大家习惯把用户分成三类:初级用户、中级用户和高级用户。其中初级用户的使用经验最少。

高品质的交互设计,会让初级用户很容易上手。稍加练习之后,初级用户也会像中高级用户一样,用起来很顺。

iPhone 的交互设计是很优秀的,所以三岁小孩也能很快上手操作。

小孩的心智比较纯粹,没有受到社会大染缸的污染。用手机时他们会根据自己有限的生活经验去积极尝试操作。

老人和小孩则有点相反,部分老人可能思维比较固化,好奇心、积极性等方面都不如小孩,所以老人在用手机时可能会有点畏手畏脚。

微信作为一款交互设计十分优秀的产品,如今拥有智能手机的老人基本都在用。有的可能是自己学会的,有的可能是子女教会的。整体而言,笔者观察周围的老人,用微信用的还比较顺畅。

 

02 交互设计:如何做到品质?

个人觉得,交互设计的高品质,是感性、理性和实践的完美融合。

曾经有人问巴菲特的合伙人查理·芒格,如果只能用一个词儿来形容你的成功,会是什么?芒格回答说,是“理性”。

老子曾经说过:“人生于世,有情有智。有情,故人伦谐和而相温相暖;有智,故明理通达而理事不乱。情者,智之附也;智者,情之主也。以情统智,则人昏庸而事颠倒;以智统情,则人聪慧而事合度”。

简·奥斯汀的小说《理智与情感》,虽然写的是小镇的恋爱与琐事,但背后折射出来的洞见——“要有真情感,更要用理智控制情感”,与老子的观点也是不谋而合。

做人做事,需要理性和感性。做交互设计,也是如此。

芒格、老子和简·奥斯汀,在强调做事业和做人方面,都是理性在先、感性在后。

做交互设计,就是在做用户体验,核心是用户的主观感受。所以笔者认为,此时是感性在先、理性在后。

交互设计里的感性,有两层意思。

第一层是微观层面,主要是性格上的敏锐度,比如我们平常听到的性格敏感、心思细腻等;第二层是宏观层面,也就是品位

量变引起质变。微观上积累的多,才会带来品位的提升。

交互设计里的理性,其标志是做出正确的决策

那怎样判断决策是否正确?

个人观点,有两块“试金石”可担此重任。

第一块“试金石”是来自最优竞品的检验,第二块“试金石”是自我检验。

最优竞品是一块很好的“试金石”。如果能和最优竞品一决高下或者“三足鼎立”,说明品质很不错;如果和最优竞品差距太大,则说明没有达到高品质。

然而现状则是,市面上的最优竞品,也就是交互设计方面达到高品质的产品,为数不多。这就意味着很多领域的产品是不存在最优竞品的,此其一。

其二,与其被动的等待最优竞品的检验,不如主动成为最优竞品。要做到这一点,则需要第二块“试金石”,也即优秀的自我检验能力。这个优秀的自我检验能力,其实也基本等同于做出高品质交互设计的能力。

实践就是一个反复试错、反复打磨、反复验证感性和理性的过程。

1 培养语感

大家都学过英语,所以应该也都听说过“语感”这个词儿。

英语语感好的人,会有这个优势:较少依赖语法,同时较少犯语法错误。

就像游泳一样,熟练了以后,身体已经对动作形成很深记忆,完成动作就几乎不依赖大脑思考,同时也不会犯错。

在语文里,“语感”被提起的次数就少了很多。大家每天都在用中文,甚至每天都在听说读写。对中文都很熟练,好像大家的语感都差不多。

但实际上,和英语一样,语文方面的语感,也存在一定差距。看看百度百科对“语感”的解释就知道了。

语感,是比较直接、迅速地感悟语言文字的能力,是语文水平的重要组成部分。它是对语言文字分析、理解、体会、吸收全过程的高度浓缩。语感是一种经验色彩很浓的能力,其中牵涉到学习经验、生活经验、心理经验、情感经验,包含着理解能力、判断能力、联想能力等诸多因素。

这个解释包含了四个经验、三个能力。每个经验、每个能力的获得都需要一定量的练习。不同的人,底子不同,练习的量存在不同,所以语文方面的语感必然存在不同。

像语感里提到的心理经验、情感经验,在不同的语言里是相通的,且和交互设计里的主观感受存在相通之处。所以,在笔者看来,一定程度上,作为母语的语文,其语感是英语语感的基础,也是交互设计语感的基础。

啥是交互设计的语感?

和语文的语感类似,交互设计的语感,就是比较直接、迅速地感知交互设计优劣的能力,是交互设计水平的重要组成部分。

这个语感,和乔布斯口中“科技和人文的十字路口”中的“人文”,以及媒体和从业人员口中的“人文素养”,也有相通和相似之处。

苹果的设备之所以在交互设计方面拥有高品质,和乔布斯早年深受嬉皮士文化、民谣和摇滚歌手 Bob Dylan、禅文化、日式美学、字体设计等人文艺术方面的熏陶密切相关。

上世纪 90 年代,张小龙在开发 Foxmail 时,想必作为程序员的他并没有太多交互设计方面的经验,彼时这方面的理论和著作也少,张小龙更多是凭感觉在做。但是 Foxmail 就做到了交互设计方面的高品质并且产品广受欢迎,想必张小龙的语感也是极佳。而据网络资料显示,张小龙本人喜欢阅读、电影和 Michael Jackson 的音乐,也有比较深厚的人文素养。

所以,在笔者看来,交互设计语感的内核,或者广义的交互设计语感,就是语文的语感,或者更进一步,是人文和艺术的语感。

狭义的交互设计语感,则是直接、迅速感知交互设计优劣的能力。

冰冻三尺,非一日之寒。一个广义语感,一个狭义语感,加起来基本等同于先天基因和人生经验之和。

听起来有点定型的感觉。那这俩语感,还能培养吗?当然可以。咋培养?

个人观点,广义的语感和狭义的语感需要同时培养。广义的语感是内核。正所谓水涨船高,这个内核越好,狭义的语感也会越好。

 

先说广义的语感,即人文和艺术方面的素养。个人认为,主要受性格和练习影响。性格则主要受遗传基因和童年经历影响。

天生内向的人,通常内心会更加细腻。这种细腻,对于日后建立丰富的精神世界和情感世界,是一种优势。

所谓祸兮,福之所依。有些人的优势,则是建立在童年不愉快的经历上。

 

比如美剧《千谎百计》里测谎公司的莉亚,童年时期暴力的父亲经常殴打她,使她学会了迅速判断别人的心情。莉亚没有受过任何专业训练,但是童年不幸的遭遇使她在识别微表情方面异常敏锐,最终被莱特曼博士力邀加入了团队。

性格有优势的话,自然是加分项。没有优势的话,也可以通过后天的练习来弥补。

这个后天的练习,在笔者看来,非常重要的一点,是来自书影音的熏陶。

简单说说书影音。

首先,一定要看一些文学性强的作品,感受“思无邪”之美。因为这些是人类内心深处共同的精神家园。个人的理解,文学性强,是指满含人间烟火味、但无半点名利心的作品,比如《诗经》、《草房子》、《城南旧事》等。

其次,一定要看一些思想性强的作品,感受大道的至简之美。因为这些对于理性、对于探索事物的本质非常有益。具体的作品,可以参考《道德经》、《巴菲特致股东的信》等。

最后,影视剧要多看,书更要多读。原因如下。

 

影视作品在刺激我们视觉和听觉的同时,留给我们思考和想象的空间,通常都没有文字留给我们的多,此其一;

其二,影视作品里的语言基本以对话为主,而小说等书籍中除了对话,还有很多关于环境、人物、心理、情感以及哲理等的描写。

基于这两点,虽然有些人可能天生就是视觉动物,但阅读始终是无法替代的,在培养语感方面也发挥着更为重要和基础的作用。

整体而言,如果目标是高品质的交互设计,在书影音的选择上面,笔者就建议大家去选一些经典的作品。具体而言,豆瓣评分和豆瓣 Top 250 榜单会是不错的参考。

再说下狭义的语感,即对交互设计的感知能力。

这个完全是后天训练出来的。如果这方面的语感不够好,则进步空间很大。主要方式就是多用交互设计方面高品质的产品。

举个例子,可能我们很多人用的第一台电脑都是 Windows 系统,后来一部分人改用了 Mac。Mac 用久了,就再也用不惯 Windows。这就是语感提高的典型例子。

我们常用的一些产品,比如微信、iOS、快手等,在交互设计方面都拥有很高的品质。

这些日常使用的产品,客观上也在潜移默化的提升我们的语感。最终的结果,也会对整个行业的交互设计提出更高的要求。

这里笔者再向大家推荐一个涉及网页端和后台管理、编辑的产品,交互设计方面很优秀,那就是博客搭建平台 SquareSpace。笔者自己的工作室网站 SnowDesign.Me 就是基于这个平台搭建的。

 

2 理性思考

交互设计要做到高品质,就要求从信息架构到交互设计,大大小小的无数细节,其决策几乎全部是正确的。这是一个很高的要求,背后必须要有理性思考的支撑。

现实情况是,很多团队做不到这一点。

然而,交互设计,从构思、到设计、到优化、到讨论、到修改,每一个环节我们都有理性思考,那又为什么做不到高品质?

在笔者看来,这些理性思考还存在进步空间。只有优秀的理性思考,才能设计出优秀的交互设计。

个人观点,优秀的理性思考,通常是一种独立思考,主要有 3 个维度,分别是:逻辑、全面、权重。

以微信为例,如果换个团队,有可能会把朋友圈作为一级 tab 单独拿出来。因为大家使用朋友圈的频率很高,这样少点一下会更方便。这在逻辑上完全没问题。

但微信团队的考虑,个人推测,至少有这 3 点:

1. 微信坚持只有 4 个 tab;

2. 朋友圈是个插件功能,可拆卸,作为一级 tab 不合适;

3. 少点一下,更方便。

这里面权重最高的是第 1 条,权重最低的是第 3 条。综合来看,微信是不会把朋友圈单独作为一级 tab 的。

 

这个例子很有意思,笔者觉着它在一定程度上反映了我们很多人存在的不足。

我们很多从业者,在进行理性思考的时候,逻辑方面基本没问题。但是在全面和权重这两点上,可能会做的不到位。这就导致我们无法做出正确的决策。这样的细节一多,必然导致我们无法做出高品质的交互设计。

所以,要想在理性思考方面达到优秀,就需要同时做到这三点:逻辑准确、考虑全面、权重正确。这还只是一个细节的决策,所有细节的决策,都要如此。加起来会是一个庞大的工程。

 

这里再顺便强调一下“全面”。

这个全面,一定要去抓、并抓到事物的本质和核心。

所谓大道至简,本质一般都不复杂。一个可供参考的数字是,本质通常只有 1-2 个点,影响本质的因素通常有 4 个左右的点。再具体的,可以参考一篇旧文:《找到本质需求:聊聊内容分类》

 

还有一个影响因素,就是社会压力。

很多时候,我们不愿去独立思考,而是直接参考别人的设计。一来省事儿,二来也容易找到归属感和安全感。而独立思考,可能会把我们带入到一种蓦然回首“空无一人”的“孤独”状态。

但是朴素的辩证法告诉过我们,凡事都有两面。选择了白天,就会失去黑夜。所以,关于社会压力的问题,本质上可能是一个选择题,同时也包含了每个人对孤独、安全感等话题的理解和接纳程度,此处就不深入讨论了。

 

3 反复实践

先说理性思考这块儿。

因为互联网产品总是会更新,所以不管是新人还是老人,只要目标是高品质的交互设计,总会碰到很多未知的或超越经验范畴的问题。

面对新问题,很少有人能在第一版的初步想法上就做出正确的决策,也就是做到逻辑、全面和权重的完美无误。人类大脑中的想法,通常都是先有后优。选定一个方案通常都需要有多个方案的比较和权衡,优化选中的方案也包含了无数细节的调优。

Foxmail、QQ 邮箱和微信的交互设计都很优秀,为张小龙提供了大量成功经验。即便如此,微信上新功能的时候,张小龙也还要通过反复试用不同的版本来找到那个正确的版本,更别说我们这些没有多少成功经验的普通大众了。

不管是选定方案的大决策,还是细节调优的小决策,要想变成正确的决策,都需要大量的实践。这个实践既包含理性思考的支撑,也包含了感性语感的检验。

 

因为语感就类似品位,也会影响到交互设计的品质。

如前所述,交互设计的语感,既包含人文艺术这个广义的语感,也包含感知交互设计这个狭义的语感。

培养广义的语感,需要经年累月的实践,少则一二十年,多则一生的时间。如果想要一直保持那个状态,就需要一直实践。重点在于优秀文化的熏陶以及自己的吸收,还有自己不断的观察与思考。

 

培养狭义的语感,也需要大量的实践。重点就是日常多用交互设计优秀的产品。

类似游泳需要让身体而非大脑记住动作,我们需要让控制感性而非理性的那部分大脑,记住并习惯于用过的所有优秀产品。

如果广义语感和狭义语感都很棒,当体验到品质不高的交互设计时,很有可能,马上就会产生不太舒服的感觉;而当体验到高品质的交互设计时,极有可能,也会很快产生诸如开心、满足之类的积极情绪。

 

结语

交互设计,如果看着简单、用着顺,则基本为高品质。

一边培养人文艺术方面的广义语感,一边培养感知交互设计方面的狭义语感;

理性思考要在逻辑、全面和权重这三方面都做到尽善尽美,全面这块一定要抓到事物的本质和核心;

第一版方案做不到高品质是正常和普遍的,做出错误的决策也是难免的,最重要的是在培养语感和理性思考方面反复实践,直到打磨出高品质的交互设计为止。

以上三点,可以帮助我们做出高品质的交互设计。

最后,借乔布斯的一句话来结束本文。

你要熟悉人类在各领域的优秀成果,尝试将之融入你在做的事情里。

 

原文地址:SnowDesignStudio(公众号)

作者:Leeo

转载请注明:学UI网》交互设计:如何做到品质?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档