首页

时间显示的设计细节

涛涛

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设  作者:VMIC UED


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

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

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


如何通过品牌符号打造差异化产品?

涛涛

互联网产品同质化越来越严重的情况下,如何打造产品差异化与品牌调性,是每一个设计师都需要去思考的问题去面对的挑战。


前言

最近在做项目的过程中,发现同类竞品的同质化非常严重,在思考如何做出符合自己产品品牌调性设计方案的过程中,发现运用品牌符号能很好的与竞品公司在设计上拉开差异化,提高品牌的辨识度。
因此对品牌符号进行了的分析学习运用,一方面是对自己学习的总结,另一方面是分享给大家自己学习的心得体会。



什么是品牌符号?

品牌符号是区别产品或服务的基本手段,通过视觉、声音、语言、颜色等各种各样的符号,与消费者从精神层面上沟通,这些识别元素形成一个有机结构,对用户施加影响。它是形成品牌概念的基础,成功的品牌符号是公司的重要资产,对于企业而言是最节省沟通成本的做法。


品牌符号的作用?

在当前互联网产品同质化越来越严重的情况下,如何打造产品差异化与自身品牌调性,使产品能够脱颖而出,成为每一个设计师都需要去思考的问题,也是每个设计师需要去面对的挑战。
合理的运用品牌符号能够帮助设计师打造产品的品牌感和进行差异化的设计,在品牌与用户的互动中发挥作用。帮助用户简化对品牌的判断;降低用户对品牌的认知成本,增加用户信任感。




品牌符号有哪些类型?

说起品牌符号,大家第一个反应可能就是认为是logo设计,其实logo只是品牌符号定义中的一小部分。
品牌符号还包括但不限于:颜色/图形符号/声音/slogan/IP形象等,包括可见的、不可见的、无形的、抽象的概念符号。


品牌符号的种类很多,本篇文章重点来讲讲品牌图形符号是如何运用在产品中的。




如何提炼品牌符号?

品牌符号通常从 logo 本身提取,根据品牌关键词,或公司愿景与业务诉求,赋予提取的品牌图形含义,并在公司各个方向设计中进行延伸应用。


比如:马蜂窝从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象、蚂蚁财富logo中提取的自由角、网易考拉海购从logo中提取圆形代表美好世界的含义等等


再比如,可口可乐的包装,一个比较重要的品牌符号就是红色背景之下的白色飘带,即使包装上没有名字,很多人也能通过这两种搭配识别出可口可乐这个品牌。
线条符号在设计上各自都有自己独特的特点,即具有很强的识别性,且易记、易传播,让消费者牢牢地烙印在心智中。



如果品牌处于创立初期,可以根据产品定位与业务背景,与业务方讨论定出核心关键词,建立情绪板,提取出符合品牌调性的:图形、颜色、字体、质感、构成,再提炼出符合产品调性的品牌LOGO,从中提取品牌符号,此处相关内容太多,不展开细说,简要概括一下。


品牌符号运用的设计手法:

通过提取品牌图形元素,再运用点线底纹、分形、抽象几何等设计手法形成品牌纹理,在 UI 设计或者运营推广设计方面都能有很好的运用。




品牌符号的运用场景?

品牌符号的运用场景可以包含平台设计的各个方向,如:线上/线下辅助/插画/品牌周边/运营活动 等等,在越多的地方合理融入品牌符号,越多的在用户面前展示品牌符号,就越能向用户传达品牌理念,使品牌深入人心。


以网易考拉海购在品牌图形符号的运用场景为例:


品牌符号在图标设计的运用


品牌符号在产品底纹的运用

点线底纹的设计手法,形成品牌纹理,运用在产品中,使整体页面更加高级,品牌感更加强烈。




品牌符号在线下广告牌等延展


品牌符号在VI中的应用


品牌符号在动效的运用

除了静态的图形设计,动效也是品牌基因延续的关键要素。一个好的动效能够帮助企业建立起足够有效的品牌形象,更高的品牌识别度,让品牌在竞争中脱颖而出,动态图形比静态的图像更容易为用户所理解,也更容易被记住,同用户更好地建立情感联系。延续品牌基因。


启屏页



loading状态


图片来源:www.plus-ex


品牌符号可以运用在产品的方方面面上,以上的案例只是图形符号的一部分使用案例,还有对外运营推广的海报、banner等,也可以反复运用品牌符号,加深用户对品牌的认知度。



总结

在当前互联网产品同质化越来越严重的情况下,每一个设计师都需要去思考如何打造产品差异化与自身品牌调性,而不是盲目的跟随所谓的趋势,趋势是一直在变化的,只有符合自己品牌定位的设计语言,使产品在设计上能够脱颖而出。互联网产品同质化越来越严重的情况下,如何打造产品差异化与品牌调性,是每一个设计师都需要去思考的问题去面对的挑战。


前言

最近在做项目的过程中,发现同类竞品的同质化非常严重,在思考如何做出符合自己产品品牌调性设计方案的过程中,发现运用品牌符号能很好的与竞品公司在设计上拉开差异化,提高品牌的辨识度。
因此对品牌符号进行了的分析学习运用,一方面是对自己学习的总结,另一方面是分享给大家自己学习的心得体会。



什么是品牌符号?

品牌符号是区别产品或服务的基本手段,通过视觉、声音、语言、颜色等各种各样的符号,与消费者从精神层面上沟通,这些识别元素形成一个有机结构,对用户施加影响。它是形成品牌概念的基础,成功的品牌符号是公司的重要资产,对于企业而言是最节省沟通成本的做法。


品牌符号的作用?

在当前互联网产品同质化越来越严重的情况下,如何打造产品差异化与自身品牌调性,使产品能够脱颖而出,成为每一个设计师都需要去思考的问题,也是每个设计师需要去面对的挑战。
合理的运用品牌符号能够帮助设计师打造产品的品牌感和进行差异化的设计,在品牌与用户的互动中发挥作用。帮助用户简化对品牌的判断;降低用户对品牌的认知成本,增加用户信任感。




品牌符号有哪些类型?

说起品牌符号,大家第一个反应可能就是认为是logo设计,其实logo只是品牌符号定义中的一小部分。
品牌符号还包括但不限于:颜色/图形符号/声音/slogan/IP形象等,包括可见的、不可见的、无形的、抽象的概念符号。


品牌符号的种类很多,本篇文章重点来讲讲品牌图形符号是如何运用在产品中的。




如何提炼品牌符号?

品牌符号通常从 logo 本身提取,根据品牌关键词,或公司愿景与业务诉求,赋予提取的品牌图形含义,并在公司各个方向设计中进行延伸应用。


比如:马蜂窝从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象、蚂蚁财富logo中提取的自由角、网易考拉海购从logo中提取圆形代表美好世界的含义等等


再比如,可口可乐的包装,一个比较重要的品牌符号就是红色背景之下的白色飘带,即使包装上没有名字,很多人也能通过这两种搭配识别出可口可乐这个品牌。
线条符号在设计上各自都有自己独特的特点,即具有很强的识别性,且易记、易传播,让消费者牢牢地烙印在心智中。



如果品牌处于创立初期,可以根据产品定位与业务背景,与业务方讨论定出核心关键词,建立情绪板,提取出符合品牌调性的:图形、颜色、字体、质感、构成,再提炼出符合产品调性的品牌LOGO,从中提取品牌符号,此处相关内容太多,不展开细说,简要概括一下。


品牌符号运用的设计手法:

通过提取品牌图形元素,再运用点线底纹、分形、抽象几何等设计手法形成品牌纹理,在 UI 设计或者运营推广设计方面都能有很好的运用。




品牌符号的运用场景?

品牌符号的运用场景可以包含平台设计的各个方向,如:线上/线下辅助/插画/品牌周边/运营活动 等等,在越多的地方合理融入品牌符号,越多的在用户面前展示品牌符号,就越能向用户传达品牌理念,使品牌深入人心。


以网易考拉海购在品牌图形符号的运用场景为例:


品牌符号在图标设计的运用


品牌符号在产品底纹的运用

点线底纹的设计手法,形成品牌纹理,运用在产品中,使整体页面更加高级,品牌感更加强烈。




品牌符号在线下广告牌等延展


品牌符号在VI中的应用


品牌符号在动效的运用

除了静态的图形设计,动效也是品牌基因延续的关键要素。一个好的动效能够帮助企业建立起足够有效的品牌形象,更高的品牌识别度,让品牌在竞争中脱颖而出,动态图形比静态的图像更容易为用户所理解,也更容易被记住,同用户更好地建立情感联系。延续品牌基因。


启屏页



loading状态


图片来源:www.plus-ex


品牌符号可以运用在产品的方方面面上,以上的案例只是图形符号的一部分使用案例,还有对外运营推广的海报、banner等,也可以反复运用品牌符号,加深用户对品牌的认知度。



总结

在当前互联网产品同质化越来越严重的情况下,每一个设计师都需要去思考如何打造产品差异化与自身品牌调性,而不是盲目的跟随所谓的趋势,趋势是一直在变化的,只有符合自己品牌定位的设计语言,使产品在设计上能够脱颖而出。


文章来源:站酷   作者:船长的成长日记 


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

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

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


线下业务数据体系搭建

涛涛

编辑导语:数据分析有助于帮助我们获知业务效果及其他效果反馈,然而当下企业在线下业务当中,不少数据都有所流失,这就要求企业寻找更有效的数据体系搭建方式。本篇文章里,作者就线下业务的数据体系搭建做了总结,不妨来看一下。


前言

在实际的业务环境下,能够完全通过线上留存的数据搭建业务数据体系的情况主要还是以互联网公司为主,有大量的线下传统公司,是没办法通过线上数据的积累完成业务数据体系的搭建的,在这种情况就得通过不同类型的数据来源去获取业务中可能涉及的数据,设计合理的业务数据体系,完成线下业务数据的监控、维护和分析。

01

如果是从数据逻辑出发,第一步应当是监控数据,就是我们平常一直说的看数据。

但在实际业务中,尤其是线下业务中,其实有大量业务没有留存业务发生时点的数据,在业务的各个转化节点的数据也很难及时获取留存,大量的数据丢失。如果需要从监控数据开始,其实相对来说难度会很大,甚至有很多业务数据没有合适的方式被留存下来,在日后的数据分析搭建中也无法起到作用。

所以,我更建议从业务的发展方向上入手,尽量细化业务流程,明确各个业务流程对部门业务到底有什么影响,核心业务流程是什么,优先从核心业务流程入手,根据业务流程的步骤完成业务数据的监控和留存。

举个例子,如果对保险行业熟悉的朋友会知道,保险业所有公司都有“培训”这个项目,甚至在保险业里面“组训”、“督训”都是很吃香的岗位,能够在短期内积累大量经验,往公司中高层走更快速,这个岗位主要的业务范畴就是“培训”,培训外勤、培训新人、培训合作渠道等等。

怎么评价培训效果呢?依靠外勤人员的销售量、销售额对培训效果进行评价,剩余对培训效果的评价来自学员和更高级的培训讲师的打分。

其实可以从上述模式看出,对线下培训这种业务模式的评判,对培训岗工作人员能力、业绩的评估其实很难通过以上评分模式进行量化,更不用说实际培训效果的追踪。

还是同个例子,如果要想追踪实际培训对销售业务产生的效果和影响,要关注几个模块:

从培训业务的目标出发,如果想从更细化的角度去关注培训,会有以下几个业务方会想要关注的点:

  • 培训的效果怎么样,怎么评估培训效果;
  • 培训效果和培训人员的关系;
  • 什么课程的培训效果好;
  • 不同类型的培训课程能够影响销售人员的销售业绩;
  • 不同类型的培训课程影响销售业绩的时间长短。

所有这些关注点的数据,均无法从线上获取,也很难追踪(这还是仅仅线下业务在实际业务细化关注项提出后的一部分数据的数据量化和追踪,如果要实现业务数据的获取,就需要公司严格要求外勤人员反馈该类型数据,可想而知如果是沟通渠道获取业务数据,就会显得更为困难)。

在这种情况下,线下业务数据体系建立就需要建立严格且标准的业务数据体系,这需要与每一步工作流程相互契合,这个流程有点类似于线上数据埋点的过程,只不过因为业务不在线上,没法在线上完成数据积累。

当然,线下数据埋点和线上数据埋点完全不一样,因为缺乏线上工具的记录能力,大量数据记录只能依靠人力完成,如果想要通过人力完成这类数据登记汇总,就需要使用统一的工具,使用统一的数据字段、数据格式,这需要做到数据流转记录的标准化留存。

以上问题的解决方法除了需要依靠人力对数据进行核准清洗外,建议最好是按照统一的字段建立本地数据库。

熟悉EXCEL或者WPS EXCEL的朋友会了解,这两个软件的处理能力随着数据量的上涨会十分受限,如果是行数超过百万级的话,是无法在EXCEL中操作的,会出现数据丢失。

同样的,如果数据量在20万以上,使用IF系的函数将会加重性能负担,非常容易崩溃,尤其是当出现过去的某一原始主键重复出现的时候,利用EXCEL技巧实现等价FOR循环会变得更难。

这个时候我们会更倾向于在本地建立MySQL数据库,可以利用MySQLworkbench或者NAVICAT对本地数据库进行处理, 利用本地数据库的字典表的字段完成线下交互数据EXCEL/CSV表格表头字段的统一,在简单获取了线下汇总回来的数据之后利用update函数完成数据更新,形成本地数据库。

作为参考,这个是阿里天池某次比赛的测试集数据源,测试数据集的文件不超过100M,模型处理后的预测集也就100M-150M,这部分数据条数约为20W,如果是数据条数在70-80W左右的线下数据,文件大小会达到超过200M,如果还需要清洗、维护这些业务数据,仅仅依靠EXCEL是完全不现实的。

既然要建立数据库,线下数据的维护同步时间就极为关键,线下数据的收集端口需要明确,不同部门、不同渠道之间进行数据交互的人员要固定,交互时间要固定,否则就容易出现数据交互不清晰,导致最后在不同的统计节点的数据无法统一,不断会出现数据重复更新的情况,不利于数据检测监控。

这要数据监控和数据维护以及数据统计在同个周期内完成,同时还要确定所有数据的每一次更新都是以数据覆盖的逻辑,即每一次新增更新的数据范围和内容必须是完全新增的数据。

举个例子,新增的数据版本为C,数据库内现有数据版本为B,更早的版本为C,上传的时候就不允许C版本的数据中含有A版本的数据内容,这样会导致数据的转化顺序存在混乱,涉及时间续流的数据就出现问题。

02

以上是线下数据体系中数据监控和数据维护的部分,接下来我们聊聊线下数据分析体系的搭建.

和线上数据类似,所有的线下“埋点”的数据回收都是服务于实际业务数据分析的,可以这么说,我们要的不是数据,而是数据告诉我们的事实,以及我们根据历史事实能推导出的合理预测,从逻辑方法论上面,就是归纳—演绎。

想进行数据分析,首要的是需要对历史和现阶段的事实情况进行归纳统计,这就需要加入线下“埋点”的数据进行统计分析,即,先深入了解知道自己的情况。

深入了解自己的情况可以从以下几个方向去深入思考:

  • 我们部门/公司实现盈利、绩效评估的核心指标是什么,什么指标是业绩反馈的核心指标(从律师来说是胜诉率,从医生来说是治愈率,蒙牛公司是销售额,德勤是咨询服务的收益)。
  • 当前部门/公司处在什么样的阶段(在不同阶段下的核心指标是不完全一致的,像快要破产的公司的核心指标是清算)。
  • 和核心指标有直接关联的业务主要有哪些,这些业务的工作流程分别是什么。
  • 历史核心指标和当前核心指标出现了什么变化,这些变化主要源于什么工作流程上的改变?

了解了这些自身情况之后,还需要深入了解,那些和你在做一样事情的人,在面对同类型业务核心指标的人,他们的工作情况、业务完成情况、实际业务流程转化,和他们历史的情况。

当然,所有的这些外部事实情况都可能不准确,这就需要从业人员实际判断这些外部信息的准确性和可用性。

这些事实怎么得出?通过数据的形式。

这些事实怎么校验?通过数据的形式。

举个例子,还是以我们上说的保险公司培训部门的例子。

假设当前保险公司的业务正常,市场正常,政策上国家没有对保险市场提出什么更为严苛的政策要求,在这些条件下:

  • 核心指标:保险专项培训对实际保险销售业务的影响大小;
  • 当前部门所处阶段:所有工作正常展开,外部竞争环境处在正常竞争环境下,无不良竞争情况;
  • 和核心指标有较强相关度的工作业务流程:根据外勤需求主动拆分培训需求-进行培训项目筛选-制定培训流程-设计培训课程-执行培训-跟进培训结果;
  • 历史变动情况:历史同类型课程的培训量几乎保持一致,培训频率也保持一致。

这些是相对比较概念化的事实,这时候就需要利用数据把所有的事实细化描述清晰,且所有的数据都需要和工作流程相关联。

同时,所有的业务数据分析都需要建立“时间”的概念,我们可以画一个时间轴来看这个业务流程:

每个业务流程下其实都需要一定时间完成当前工作状态的信息收集,数据本身就具有时间的特性,如果是金融公司、金融部门,还会对数据的时间序列有更严格的要求,因此,数据本身就需要打上所属时间的标签。

在业务流程中,记录每个事件发生时间点的数据,留存这些时间标签下的数据,完成基础数据源的汇总。

在分析中可以将分析划分为几层,可以先按“事前—事中—事后”的顺序留存各个事件发生时点的数据,从中尽量明确有规律性的节点,例如:

  • 从收到不同规模的培训需求到实际举办培训需要多长时间?
  • 培训完到培训成果检验需要间隔多久时间?

这些时点的数据收集可以帮助你深入了解业务流程,在日后做到各类自动化有很大程度上的帮助,这就是业务体系初步建立之后再进行优化的工作了。

在关注了业务的核心指标后,找到能够对核心指标产生影响的因素,将这些因素拆分成“事前—事中—事后”的形式,设定一定的主键完成数据特质化的积累。

以电商为例,电商可以以“订单号—用户ID”的形式,如果是在保险培训的角度下可以参训外勤人员ID作为主键,当然,不同的业务模式会有不同类型的主键,涉及的后续的一些数据内容也不一致。

还是以保险培训为例,在培训中有大量数据是没有办法轻松进行积累的,也同样不能很明确地进行量化,这时候就要建立评分卡的制度,用于量化一部分难以直接估量的行为数据。

比方说,A讲师培训营销技巧和保险学原理课程,两门课程完全不属于同一个课程体系下,在实际外勤作业中,营销技巧所能给实际业绩的增长是短期高效的,而保险学原理课程可能在提升外勤人员金融素养方面更为突出,可能在面对高净值客户的时候能更体现优势。

这部分提升并不会很直接的在实际销售业绩上有明确的体现,这时候就会需要对实际的培训效果进行分类归纳,建立不同评分评级制度。

类似于量化投资,这些数据都会需要和业务核心指标建模拟合判断,根据历史经验,最好是建立相关的多元线性回归模型,机器学习模型虽然在预测方面更具有优势。

但是实际可解释性并没有那么强,在实际业务总结反馈的时候并不能明确的找出问题所在,所以在预测分析的角度还是更推荐从线性回归的角度配合相关性进行分析。

希望分享的这些给现在还在线下摸索业务数据体系搭建的朋友们一些启发。

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

文章来源:人人都是产品经理  作者:Logan_RRRC

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

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

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



设计万花筒|做UI,文案也需要设计?不信你来瞧瞧

lanlanwork


在吸引用户使用产品时,存在许多分散注意力的错误,精准的提示性文案设计可以作为改善用户体验和吸引用户的工具。作为设计师,我们大部分都将注意力集中在视觉和交互上,但如何才能继续创建更有用,更吸引人且更易于使用的产品呢?这就不能不提及到常常被我们忽视的一些提示性文案,那么通过日常和工作中遇到的一些页面和大家一起聊聊那些被忽视的提示性文案设计。

1

01.前言

作为设计师,我们大部分都将注意力集中在视觉和交互上,但如何才能继续创建更有用,更吸引人且更易于使用的产品呢?这就不能不提及到常常被我们忽视的一些提示性文案,那么通过日常和工作中遇到的一些页面和大家一起聊聊那些被忽视的提示性文案设计。

“永远不要削弱语言的力量,言动于心, 心动于身”——公开演讲者Hamza Yusuf

在吸引用户使用产品时,存在许多分散注意力的错误,精准的提示性文案设计可以作为改善用户体验和吸引用户的工具。著名UX公司-尼尔森诺曼集团(Nielsen Norman Group)经过大量调研后得出用户在使用产品的过程中存在以下现象:

1、浏览页面文案是较高文化素养用户的典型行为。

2、在平均600至800字的页面上,用户只能阅读大约20%的文案。

3、简洁的文案,目标清晰的语言和可阅读的提示性文案能将产品可用性提高124%。

图片

 

02. 什么是提示性文案?

它是以微观的形式,存在于弹窗、按钮、搜索等链接位置,信息性或指导性的文本,在使用产品时以提示的形式告知和帮助用户提升使用体验。
图片
当用户采取特定操作(例如搜索产品)时,“提示性文案复制”可作为指南。它还可以建立用户对产品的信任和同理心,并与整体品牌形成更牢固的联系。

那么合理有效的提示性文案设计是:

· 清晰,简洁且易于理解

例如在一些登录注册页面我们尽量让提示性文案设计的清晰明了,易于理解。让用户可以毫不费力的理解这些文案的作用,提升用户使用体验。

· 融合产品品牌调性及语气

在设计提示文案时,最好能够从产品品牌调性和用户特性出发。 

· 视觉上与整体设计浑然一体

提示性文案作为产品的一部分,在风格上应该与整体的设计保持一致,不需要过于特立独行,与整体设计浑然一体最为合适。

· 满足用户需求,回答问题或建立同理心

提示性文案设计是为了更好的帮助用户理解页面的操作逻辑,若设计改变了用户的心理与习惯,可能会增加用户的学习成本或者被用户抛弃。我们在进行设计的时候,如果要设计一些创新的操作规则,那么需要做更多的调研和测试,确保这个规则符合用户的心理。
图片

a

03.提示性文案是如何提高用户参与度的?

有效的提示文案可以试图理解预测用户的期望,让用户感觉好像是正在与该页面进行对话,参与其中从而吸引用户并增加转化的作用。

 

· 要与用户产生同理心

提示性文案增添情感, 可以与用户建立更好的关系, 并有助于建立更牢固的联系。当遇到设计流程页面时也可以利用提示文案让产品的使用步骤更透明清晰,以达到同理心。
图片

 

· 要做到清晰与控制

清晰明了有控制的使用提示性文案也会减少焦虑并更好地传达信息给用户。
图片

 

· 透明传达信息,建立信任

由于有些产品可能引起人们对安全性和隐私的关注, 因此建立信任的提示性文案将对产品带来积极影响。
图片

 

· 促使人们采取行动

好的提示性文案可以帮助用户完成任务, 提高参与度并鼓励用户走得更远, 做更多的事情。例如在很多电商APP“购物车”中会常常出现这种用来鼓励用户继续探索其他类似产品的提示性文案。

图片

因此推动提高用户参与度, 同理心、透明感以及清晰感和控制感, 都是好的提示性文案设计的宗旨,但是, 并非所有的都是好的。

 

04.糟糕的提示性文案的影响

在设计过程中应始终努力设计出有效的提示性文案,但是, 一定是有比没有要好吗?个人认为也是不必要的,糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况:

· 含糊不清

· 过于啰嗦

· 无意义,产生误导

· 无同理心

 …

因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑,甚至可能会破坏品牌对用户的忠诚度,产生本末倒置的结果, 也给用户带来不佳体验。

 

05.结语

提示性文案设计对产品体验产生很大影响,好的提示性文案设计优点是可观的:增加用户参与度,品牌忠诚度,信任度和丝滑的产品体验。如果运用的巧妙得当,好的提示性文案可以帮助产品在竞争日益激烈的市场中脱颖而出。以上是我对于一些提示性文案设计的一点儿心得体会,欢迎与大家共同探讨。

文章中部分图片来源于网络

 

原文地址: 58UXD

作者:环铁艺术家


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

                                                            微信图片_20210513163802.png

 

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

 

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


2021年UI设计发展新趋势,你Get到了吗?

seo达人



本文主要从以下5个方面介绍2021年UI设计发展趋势,废话不多说直接上干货!

趋势一:极简

一份来自微软的调查数据表明:2000年,人类的集中注意力的时间平均在12秒,而到了2015年,变成了8秒。而另一个研究发现:有47%的用户希望一个网页能在2秒之内加载完成。

但事实上,目前网页的平均加载时长达到了8.6秒,而在移动端,则变成了22秒。

网站的加载速度会受到很多原因的影响,UI设计是其中重要的因素之一。更少地使用图形元素和更简约的UI会在很大程度上加快一个网页的加载速度,同时更明确的「指引」和元素的区分也更能让用户快速熟悉网页的交互,甚至,简约的网站还能影响其搜索结果排名,Google 在今年就开始建议网站的加载时间不应超过3秒,并将其加入到搜索排名的影响因子中。

ui设计趋势


趋势二:微动画

今年是「全面屏」手势的加入,让厂商们发觉「跟手感」会在很大程度上影响用户体验到的品质感,于是许多国产厂商开始注重微动画的设计来尽量对用户在屏幕上的滑动产生回应。

但仅有系统层级实现的这些微动画还远远不够,当用户进入到APP中,如果这些微动画不复存在,那产生的割裂感会让整个用户体验大打折扣。所以,安卓手机系统UI 的精细化会倒逼 APP UI 设计的进步,当然,对于那些「懒得设计,照着iOS 版再做一遍喽」的厂商们,如果再不用心做,就要面临着被淘汰的风险了。

趋势三:重叠效应

什么是重叠效应?简单来解释就是,通过把不同的元素(如色块,文字和图像)重叠地放在一起以达到说明内容和视觉引导的效果。

本来由于对比度不足,重叠效应在LCD面板上的效果并不理想,一些明度接近或者色彩对比不够明朗的设计很容易让用户混淆不同的元素,同时一些低透明度的元素会让LCD 面板对比度不足的缺陷彻底暴露。而在 OLED 面板上,这些问题自然迎刃而解,未来必然会有更多的设计师来更加得心应手地运用「重叠效应」以实现他们想要的效果。

趋势四:移动设备适配要优先考虑

在去年,移动端流量消耗占比为 52.2%,实现了首次真正意义上的赶超PC(包括 Tablet 电脑)。并且这个趋势在2021年会继续保持。

这意味着从今天起,一个网站(或互联网产品)的UI设计需要首先适配移动端,从而满足更多数的用户使用场景。

趋势五:深度空间

一个带有纵深方向的空间必然要比平面具有更高的信息效率,更能在视觉上对用户的操作进行正确引导。

其中发展最成熟以及最高效的还是「阴影」相比于普通的高斯模糊以及高级点的「毛玻璃」,阴影的特点在于不光能在UI中把某一个特定的页面提前,还能同时展现多个页面并赋予它们对应的纵深关系,以及大多数的 UI 设计工具(如 PS、AI、Axure)对阴影的支持都十分友好。


文章来源:传智教育

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

                                                            微信图片_20210513163802.png

 

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

 

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

网页UI设计如何体现视觉层次感

seo达人




但是,究竟如何才能结合网页/产品特色和用户的真实需求, 将页面视觉内容层级化, 从而提供更加优质的用户体验,实现与用户的互动, 最终促成产品购买呢?下面小编就结合最新且具有极佳视觉层次感的网页设计实例分析和介绍视觉内容组织技巧,以及在原型化这些网页设计的过程中(结合小编最爱的一款又快又简单的原型工具Mockplus)需要注意的原型设计技巧:


1.利用界面元素尺寸大小建立层级结构

界面元素(例如文字,图片或形状等)尺寸越大,越突出,越容易吸引用户的注意。所以,在具体的网页界面设计中,设计师可以通过有梯度的尺寸变化,创建页面信息的层级关系。当然内容重要性上,也应该是与尺寸大小成正比的(即越大越重要)。

大图模式

如图,利用文字的尺寸大小,体现网页信息的层级。

注意:尺寸大小也要控制在用户能够接受的范围内

太大,能够展示的内容有限。太小,易读性差,也会比较繁杂。


原型设计技巧:

在利用Mockplus (一款具有丰富组件库和图标库的原型工具)创建网页原型时,绝大部分的组件都是可以简单通过宽高属性或拖拉边框两种方式调整其尺寸,轻松创建直观的层次结构。

大图模式

如图,Mockplus允许用户简单通过宽高属性或拖拉边框的方式调整组件尺寸大小。


2.利用界面元素明暗,阴影以及透明度的不同,体现简单层级

如白底黑字般,同类元素,同一色彩,不同的明暗,阴影以及透明度,也可体现简单的层级关系。当然,在没有过多颜色的参与下,不同文字,图片等多种的页面元素结合透明度,阴影以及明暗,也可使整款设计极具简约风和层次感。(点击链接更多的简约风网页设计技巧)

大图模式

如图,文字明暗,结合尺寸变化,让页面层级更加清晰简约:


原型设计技巧:

而在这一方面,小编发现Mockplus提供了专门透明度属性,可以根据层级设计需求,修改属性数值进行设置。


如若,需要添加元素阴影,也可轻松通过组件的重叠实现。

大图模式

如图,“图片”与“形状”组件的组合,实现阴影的添加。


3.利用色彩,划分页面层级

色彩,作为设计师最常使用的视觉层次工具,也为他们创建极富层级感的网页设计发挥着举足轻重的作用。而具体的设计技巧,大家可以参考以下几点:


首先,色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。如图:

大图模式

如图,明亮的红色和黄色更易从相对较柔和的粉色背景中脱颖而出。


而且,某些色彩,尤其是某些主题配色方案的选择,对于确定网页的整体基调,吸引用户注意,作用也非常明显。例如,蓝色,一般代表平静祥和,适合一些日常事物管理类软件选择。而红色,则代表热情喜气,适合一些节日相关购物促销类软件选择。


大图模式

如图,利用红色突出网页促销信息。

其次,色彩饱和度的梯度变化,也可体现直观而丰富的层次结构。

同一色彩,饱和度的梯度变化,也可帮助展现网站元素的层次结构。如图:

大图模式

最后,色彩模块,对于体现界面元素的逻辑关系,作用也是显而易见

存在同一逻辑关系的各个页面元素就近放置在同一色彩模块,可以让页面组织结构更加清晰,易于用户快速查看相关内容。


大图模式

如图,利用色彩模块,更直观地划分功能区。

原型设计技巧:

而这一方面,Mockplus提供了非常强大的色彩选择器,设计师们可以简单点击实现色彩的选择和添加。其色彩收藏功能,也为以后复用和保持整款设计配色的一致性提供了可能。


当然,结合“形状”组件,为页面添加丰富的功能色块,以及添加“鼠标悬停时”或“点击时”的简单色彩交互状态,也不是难事。

大图模式

如图,添加色块划分界面功能结构。

4.利用页面布局,展现网页层级结构

页面布局也是设计师们常用的视觉工具之一。一方面,同一网站,内部各个页面可以根据软件或产品展示内容需求,采用多样的布局模式,增加页面的多变性和可读性。另一方面,也可直接在不同页面采用重复的页面布局,方便帮助用户形成一定的阅读习惯,快速有效的查询需要的信息。

而具体单个页面的布局模式,大家可以尝试以下的方式实现:


*利用网格划分不同页面模块

网格是公认的划分页面功能模块的工具之一。而它在组织界面视觉内容方面,作用也不可小视。加之,结合各个网格的色彩变化,也能使整个页面更加炫酷直观。如下图:

大图模式

*利用位置不同体现逻辑关系

同一逻辑关系(比如同类,从属,因果等)或相近/相关的元素放在同一或并列的网页位置或模块内,更易于用户浏览所需页面信息。


当然,每个逻辑关系内,结合大小标题和列表进行展示,层级关系会更加深入清晰。


*利用点线

网页设计中,设计师不仅可以直接使用点线标出需要强调的内容,还可以利用点线划分页面板块和布局。

大图模式

如图,通过位置的不同体现内容之间的逻辑关系。同时,利用线条划分页面结构和布局。


*利用对齐方式的不同

文字,图片以及相关元素的对齐方式,也是体验不同层级结构的重要工具。

总之,页面布局也可帮助设计师们创建更具美感和层次感的网页设计。


原型设计技巧:

在使用Mockplus时,设计师可简单使用“快速格子+自动填充”的功能组合,实现界面网格的轻松添加。而且,在具体的设计过程中,对齐方式,标尺以及参考线等工具的使用,也可使网页布局设计更加简便快捷。


大图模式

如图,利用Mockplus的快速格子和自动填充功能制作网页网格,划分界面功能结构。


5.利用留白和间距,突出界面视觉内容

留白的巧妙运用,能够非常有效地突出页面信息。而页面内部元素之间,保持适当的间距,让彼此之间的相互联系而不“拥挤杂乱”,也是吸引用户注意的不错策略。如图:


大图模式

6.利用对比,凸显网页层级结构关系

以上所提及的各种视觉组织工具,例如尺寸,色彩,明暗,间距等等,同类或不同类之间的鲜明对比,也可以让页面视觉上更加美观而丰富,同时体现元素之间的结构层次关系。


大图模式

如图,利用色彩的强烈对比,突出页面层级。

此外,页面元素的相互叠加,清晰度,以及细节展示程度的对比,也能有效地凸显网页内容的重要性层级。


大图模式

如图,靠前的图片和文字应该更加重要,清晰,细节也应更丰富,从而方便用户识别读取,避免层次混乱。


7.采用不同的界面风格,打造独特的网页视觉层级

当然,并不是说设计师就必须通过以上的设计工具展示网页重要性层级结构。实际上,结合设计师特有创意,独特纹理(texture),图形或图像元素等,打造出具有设计师独特风格的视觉层级,也会是不错的尝试。如下图:


大图模式

总之,不管是否使用以上的设计工具,结合设计师创意,打造独具一格的视觉层级风格,都是不错的设计理念。


原型设计技巧:

而在这一点上,Mockplus提供了很多优质功能,帮助设计师随心设计,并简单快捷的原型化,测试和迭代这些天马行空的创意。


比如,其团队协作和团队管理功能,方便设计师更加高效地完成设计。其8种演示和分享方式,例如导出图片,HTML以及演示包等等,为设计师根据切实需要,选择适当的方式测试和分享相关设计提供了便利。


此外,其组件样式库,也为保存和分享需要的组件样式并随时复用提供了可能。


8.分析用户需求和网页浏览模式,优化页面内容和位置

在进行网页界面层级结构化的过程中,并不是毫无章法,盲目的随意添加或突出某个部分,而是需要分析用户行为,根据用户需求等级进行相应结构层次的划分。否则,再怎么赋有层次感,用户也会因为找不到需要的东西,莞尔离开。


此外,除了根据用需求决定哪些内容需要放在最紧要,最突出的位置,以吸引用户。同时还需要根据用户浏览网页时的阅读模式,分析重要内容的页面位置。


根据美国著名网站设计工程师Nielsen Norman Group研究表示,用户总是在网页浏览中惯用“F”或“Z”型阅读模式,即用户常常是从左到右,开头结尾详细阅读,而中间部分则根据网页或文章大小标题结构,选择性阅读的模式。如下图:

大图模式

那么,网页设计中,设计师就需要注意页面首尾内容的趣味性和实用性,以及中间主体部分注意大小标题简洁明了,建立清晰的框架层次结构。

总之,无论是用户行为画像,还是用户浏览模式分析,最终都是希望能够根据用户需求,更加合理的安排和分布页面内容,直观清晰,易识别。


9.其他设计工具

而其它视觉设计工具,例如界面文本方面,文本字体,排版,对齐方式等等,也可突出页面的层级关系。


原型设计技巧:

如若设计师希望通过网页文本的尺寸,字体,颜色,排版以及对齐方式等实现框架结构的构建时,Mockplus的“单行文字”和“多行文字”组件就可以轻松帮助实现。而且,适当的结合一定的交互设计,也可使整款设计更具吸引力。


结语

当然,层次结构化不仅能让网页更加直观清晰,赏心悦目。而且,具有一定局限性的Android 或iOS app,例如页面尺寸的限制,设备屏幕的限制,响应与否的限制等等,更需要清晰的层次结构,让页面摆脱混乱繁杂,吸引更多用户点击使用。而这方面,也同样适用以上所有设计技巧。


总之, 无论如何, 及时地将各种设计想法,通过一款实用且强大的原型工具(比如以上介绍到的Mockplus), 转化成直观可视的原型,更进一步的测试和迭代,才是创建真正美观实用,深受用户喜爱的web/app的必经之道。


总之,希望以上介绍的相关层次结构设计技巧和原型设计技巧能对你有所启发。



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

                                                            微信图片_20210513163802.png

 

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

 

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



UI设计师定制的UI设计配色技巧

seo达人


每当我看到一个漂亮,优雅并且简洁美观的界面,就会忍不住保存下来。现在,我已经收集了100多个美不胜收的UI 界面。在一次次观摩,欣赏和学习后,我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢?现在我找到了答案,是色彩。

本文中,结合自身经历,我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师,但是我保证,这些为你量身打造的UI 设计配色技巧,定会让你受益匪浅。

1. 色彩的魔力

色彩是会说话的,甚至可以像语言一样强大。回想以下,每当你初见一个网站或产品,给你留下第一印象的是什么呢?是视觉外观,而视觉外观很大程度上是取决于色彩运用。

那么,在UI设计中,色彩究竟可以做些什么?

1)反映品牌的内涵和品质

颜色可以为品牌设定基调。 CCICOLOR的一项研究表明,用户在评估一款在线商品时,只需花费短短90秒,而判断的依据高达62%至90%将取决于配色方案。

2)实现更佳的用户体验

色彩的有效运用能提升整体美感,提供更优的阅读体验,创造清晰和谐的风格。

3)影响购买决策

根据Kissmetrics的说法,产品的视觉外观是影响消费者购买决策的首要因素。此外,QuickSprout的研究也表明,90%的产品评估都与颜色有关。Neil Patel曾写到,“颜色在你购买特定产品的原因中占据85%的分量”。正因如此,颜色已成为当今重要的营销手段之一。

2. 色彩的基本概念

色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言,请看下表:


大图模式
点击此处添加图片说明文字

3. UI 设计配色技巧

1) 色彩使用也讲究“天时地利人和”

存在即合理,没有哪一个色彩本身就是丑陋和不具备美感的,只能说,如果我们错误的使用了色彩,那么它的美一旦被破坏,就只剩下丑陋和别扭了。

想象一下,如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色,你还对他们的炸鸡充满饥肠辘辘的感觉吗?女人喜欢穿着黑色礼服搭配鲜艳口红参加派对,为什么?因为这样会让她们看起来性感迷人。

不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢?这里请注意5点:选取合适的颜色,运用于合适的设计场景,注意时间变化,关注目标用户,明确想要达到的目的。

这里请认真查看上图,明确颜色的意义。但如果你非要冒险追求独一无二的设计,那么祝您好运。


大图模式
点击此处添加图片说明文字

2)留心蓝色

为什么专门谈蓝色?蓝色不是海洋天空的专属色,蓝色也是UI 设计的青睐色。


看看你常用的一些比较有名的APP或者网站,比如Facebook,Safari以及办公软件等等。有什么发现呢?是的,它们的界面都是蓝色,各种层次的蓝色。

有研究表明,蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在,大自然中,各网站的UI界面,服饰衣物等,蓝色随处可见。包括我此刻写入文章的Microsoft Word,界面也是蓝色的。

蓝色无疑是一种安全的颜色,它能最大程度上获得用户的信任并被广泛接受,蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择,请用蓝色。


大图模式
点击此处添加图片说明文字

3)背景色和元素之间的色彩变化技巧

看看以下的界面:


大图模式

(来源)

这里暂且不谈这又是关于蓝色的UI界面,让我们专注于它的色彩变化。主题颜色是蓝色,其他元素是较暗的蓝色和更明亮的蓝色。整体看上去,各层次的颜色平衡和谐且又脉络清晰。

怎么做到自然而又极具美感的色彩变化?

只是一个简单的黄金法则:通过降低亮度和增加饱和度可以使色彩变得更深;通过增加亮度和降低饱和度来使色彩变得更浅。

4)色彩组合的黄金比例——(6:3:1)规则

在设计时,色彩组合必不可免。组合颜色很容易,但组合后如何避免色彩混乱和累赘?如何既能够不显得单调又展示设计感?

记住二个原则:

第一个:6:3:1规则

60%+ 30%+ 10%的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉,并能提供更佳的用户体验,可以让用户的实现从一个点舒缓的移动到另一个点。

第二个:最多3个原色

这个规则与黄金(6:3:1)规则相匹配。这是避免混乱并保持平衡的最佳办法。


大图模式

5)颜色组合和互补

提供和谐的配色方案时,需要注意些什么?在这个过程中需要考虑以下方面:

第一, 色调

您可以在色环上生成单个“色度”的许多变体。通过添加白色,黑色和灰色来生成不同的色调。

实现平衡色调,最简单的方案是单色(单色)方案。

第二, 对比

颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度,比如黑色和白色。强烈的对比度可以让人集中精力,并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。


大图模式

注意:对比的使用不要过火,这样容易使用户产生困扰。

6)黑白色搭配不过时

黑色是所有中性色中最强的,而白色是最常用的背景颜色。黑色是一个很好的选择,有种高端和永恒的感觉,而白色可以带给用户自由,宽敞和透气的感觉。如上所述,黑色和白色也是最大的对比色,如果合理的使用黑色配合白色,会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。


大图模式

7)从自然和艺术中获得灵感

自然与艺术是灵感的主要源泉。抬头看看天空,你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美,非常自然,不带刻意的痕迹。而艺术是对自然的直接反映,是非常宝贵的资源,值得好好利用。


大图模式

8)颜色心理学 – 避免性别误区

或许天生如此,女人不喜欢灰色,橙色和棕色。她们钟爱蓝色,紫色和绿色。而男人不喜欢紫色,橙色和棕色。男人喜欢蓝色,绿色和黑色。只要记住,当你的产品目标用户群是男性时,选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩,结果可想而知。

还有一个误区,人们以为粉色是女性的喜爱,但结果也许会让你大跌眼镜。


大图模式

4. 工具和模板

这里我总结了一些有助于UI配色的工具和模板,希望对您有所帮助:

1)Coolors.co

Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板,还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。

2)Mockplus

Mockplus是一款非常方便的UI / UX设计工具,其启动页面加入了配色精美的示例项目和模板,可直接导入桌面客户端。其编辑器中,可对组件进行多样的色彩设置和编辑,内部也包含完整的颜色选择器,支持导入图片和GIF,如果您是要在原型设计过程中产出精美的UI 界面,Mockplus能满足您的需求。


大图模式

3)Paletton

Paletton有点类似于Kuler,但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时,Paletton将会是您很好的选择,它可以创建协同色彩组合工作,是强大的UI调色板。

4)Check my Color

Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具,也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。

5)Chinaz

该网站提供了丰富的配色资源,包括在线调色板,网页常用色彩,web安全色以及网页颜色选择器,会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。


注意:可用性是关键

创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验,为用户的生活增添快乐和幸福才是我们设计的目的。因此,在UI 设计配色上,每位UI设计师应该记住,界面应该是符合高度实用和并且清晰明了的。

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

                                                            微信图片_20210513163802.png

 

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

 

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

即时通讯界面设计 + 有趣的包装设计

前端达人

即时通讯界面设计 表达其物流行业的专业性和商务性,标识整体精致细腻,令人印象深刻,在界面设计时以厚重,大气的配色方案和视觉风格提升整个品牌的含义。


WechatIMG582.jpegWechatIMG580.jpegWechatIMG579.jpegWechatIMG578.jpegWechatIMG577.jpegWechatIMG576.pngjhk-1622106840073.jpgjhk-1622106831625.jpgjhk-1622106826267.jpgjhk-1622106817765.jpgjhk-1622106812814.jpgjhk-1622106811715.jpgjhk-1622106805738.jpg



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

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


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

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

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


超酷!数据可视化UI设计欣赏!

seo达人



为什么数据可视化ui设计非常重要?

数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。

一个优秀的数据可视化界面是什么样子的?

今天小编就带给大家一组超酷数据可视化UI设计,风格多样,供参考。

大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式
大图模式

文章来源:快资讯 作者:ZAKER汽车


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

                                                            微信图片_20210513163802.png

 

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

 

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



UI设计的几种技能提升技巧

seo达人


每天学习一点,你就进步一点,不断向上成长,成功没有偶然,也没有理所当然,能够成为一名优秀UI设计师的人不是因为他们有多幸运,也不是因为他们天赋有多高有多么强的悟性,而是因为他们一直在努力。

只不过一般人只看到别人的成功和辉煌,却往往忽略了别人背后辛勤的努力和付出,所以,在不服气或者眼红之时,才会用偶然来加以解释。只有不断学习提升,才能让自己变得更有价值!

以下是周老师给大家讲解UI设计的几种技能提升技巧。学会了可以让你快速达到事半公倍的效果。

1. 注入生命

大图模式

无论是登录屏幕还是加载消息,用户都可以从这些小细节中获得乐趣。这就是为什么像Old Spice和Geico这样的公司拥有如此知名品牌的原因。通过在他们的营销中注入幽默感和个性化的设计,他们创造了更令人难忘的广告和内容。

MailChimp用户体验总监Aarron Walter说:“我们已经发现在副本中加入幽默、个性,以及许多塞进工作流的复活节彩蛋都可以把原本平凡的任务变成人们期待的体验,有时甚至是错过的体验。”

将生命注入复制中,这与说“正在加载...”与“我们训练有素的团队正在努力做到的”是有区别的。这是出乎意料的,并为你的用户提供了一点娱乐。

好的文案并不一定意味着它必须幽默。它只是意味着写一篇引人入胜、值得一读的文章。当然,在一些领域,如,医院、政府等地的应用是不合适的。

Reddit的联合创始人Alexis Ohanian在《Tools of Titans that I loved》中说了一些我非常喜欢的一句话:“花点时间使它更具人性化,或者(取决于你的品牌)更有趣、更不同、或者更多。这是值得的,这就是我的挑战。”

在你去设计你的下一个产品时,请考虑如何将体验与引人入胜或有趣的副本结合在一起。

2. 放入一些图标和表情符号

大图模式

添加表情符号和图标可以帮助快速描述元素的功能。就像是当用户看到放大镜图标时,可以立即识别出他们可以通过单击来搜索内容。

我喜欢Pieter Levels如何利用他的网站NomadList上的表情符号来使其更具吸引力和用户友好性。这是使UI更具视觉吸引力的简单但有效的方法。

除此之外,关于这一点没有太多要说的了,不要过度使用它,也不要通过尝试过度创意来重新发明轮子。用户认识到某些元素具有全局意义。因此,请勿通过干扰用户熟悉的内容来使用户感到困惑,尽可能尝试使用已有的约定。一个用户图标代表一个用户配置文件,UI设计的几种技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一个“+”图标代表添加,一个购物车代表购物车,一个齿轮代表设置,等等。

下面是一些我最喜欢的地方,你可以在那里找到图标和表情符号:

Emojione

Icons8

BoxIcons

Feather

Material

3. 通过插图使你的产品更具人性化

大图模式

插图使你能够以轻松愉快的方式传达复杂的信息。

在我们还小的时候,我们就已经接受过将视觉与文字和思想相关联的培训。你见过没有插图的儿童读物吗?

添加插图可以帮助缓解心情并平衡界面。插图可以吸引用户的注意力,并使应用程序的各个方面更易于理解。

但是,更重要的是,插图要有目的性,并用作内容的补充,而不是替代。插图应重点突出,并提供对UX的改进,而不是干扰操作。与插图的颜色和样式保持一致也很重要,这样它们就不会显得格格不入。

4. 添加一个黑暗模式选项

大图模式

根据你正在开发的应用程序,添加深色主题选项可以为像我这样生活在深色模式下的用户提供安慰。黑暗模式对眼睛更友好。

在黑暗模式下进行设计与在明亮模式下进行设计没有太大不同。它所需要的只是一个不同的调色板。我建议让用户决定在暗模式还是亮模式之间进行选择-提供在两种模式之间切换的能力将改善您的应用程序体验,并允许用户保持对其体验的控制。

5. 使用高质量的图像

大图模式

应用程序中的图像与其他任何视觉元素一样重要。你选择的图像中的视觉效果可以使UI更加生动生动,从而增强你的UI。

有很多很棒的地方可以找到高质量的图像。以下是一些我的最爱:

Unsplash

Pexels

Freepik

Adobe Stock

Pixabay

6. 设计有趣的404页面

大图模式

看到应用程序中的每个事件,即使不是那么令人兴奋的事件,都可以提供令人难忘的体验。

错误状态通常是消极的经历,但你可以通过提供一些个性或乐趣来将其转变为积极的经历。

我最喜欢的示例是Google Chrome浏览器的“没有互联网”错误屏幕。他们提供了所有必要的信息,以告知用户如何修复它,而且还提供了T-Rex无尽的跑步游戏。

我最喜欢的另一个是Dribbble的404页面。它之所以出色,是因为它可以使用户参与其中,并且他们可以快速返回浏览涂料设计。

“人们仍然在推特上发布关于我们在Hipmunk上的错误推文,这是一条错误消息。他们为什么要这样做?因为这样做使他们在做一些原本希望很无聊的事情(例如寻找航班)时显得举足轻重。” -Hipmunk的创始人Alexis Ohanian说。

元素的高度可以帮助你在应用程序中创建信息的层次结构。用户认为深度代表了重要性-因此,越靠近的元素优先级越高。

但是,仅仅因为阴影看起来不错,并不意味着它们始终是不错的设计选择。在设计决策时要有目的性,并在添加阴影时要记住这些元素的重要性,这一点很重要。

在做出任何设计决策时,你应该始终这样做以改善体验,而不仅仅是美观。我已经提到过几次,因为我想开车回家。不要忘记,应用是为使用而设计的。不只是因为好看才被人看的。

文章来源:快资讯  作者:躺鸡萌妹

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

                                                            微信图片_20210513163802.png

 

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

 

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

日历

链接

个人资料

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

存档