首页

设计模式 | 多级撤销 Multilevel Undo:让用户更有安全感

鹤鹤

What 是什么

简介:「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录,根据原始执行顺序,一步步返回历史操作。


例子:用 Sketch 画设计稿时,可以多级撤销,允许用户返回上一步或更早的历史操作


undefined


Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索,不必担心造成某些不可取消的修改。例如,如果单击了错误的菜单项,不需要进行复杂的恢复,不需要退回到此前保存的文件版本,或者寻求系统管理员的帮助。


多级撤销也让专家用户更快更容易地探索工作路径。举例而言,一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作,研究那些结果看是不是他喜欢的,然后再逐一撤销,回到起点。


When 什么时候使用

需要用户频繁在单一页面上交互的用户界面,相比普通的网站或者移动端 APP,交互操作要复杂得多。例如:文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。


使用条件:该软件的单一界面交互比较复杂和频繁


How 如何使用

软件首先需要一个强大的模型,这个模型是关于动作是什么样的——动作的名称、动作所关联的对象,以及如何返回历史动作。


决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言,在大部分应用里,人们期望能撤销下面这些改变:

  • 文档或表单的文字输入

  • 数据库

  • 图片或画布的修改

  • 布局上的变化位置、大小、顺序或分组在图像应用程序中

  • 文件操作,例如删除或修改

  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列

  • 任何剪切、复制、粘贴操作


下面这些修改基本上是不可撤销的:

  • 文本或对象选择

  • 窗口或页面之间的导航

  • 鼠标光标和文本光标的定位

  • 滚动条的位置

  • 窗口或面板的位置和尺寸

  • 在一个未提交的对话框或模态对话框上的改动


展现方式

然后,决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。


Example 案例

案例一:Microsoft OneNote 笔记编辑器

用户需求:撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销,或者使用编辑菜单下的按钮帮助用户返回上一步。

undefined


案例二:Photoshop 多级撤销

用户需求:回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作,由于 PS 的操作修改繁琐且复杂,所以为用户提供了历史记录面板,用户也可以点击历史操作步骤回到想要的历史操作记录。

undefined


案例三:美图秀秀图像处理 App

用户需求: 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时,常常会返回查看对比不同的效果,或者操作错误时返回到前几步,顶部的撤销按钮可以让用户回到任何历史操作步骤。

undefined


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

文章来源:站酷。 作者:  Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


案例锦囊|交互设计中「情感化」设计优秀案例(二)

seo达人


1.  本能层 —— 感官刺激

对于本能层,设计师需要在符合功能需求的前提下,尽可能的给用户带来听觉、视觉、触觉的感官刺激,极力去促成用户与产品的 “一见钟情”。

 

案例 1  App Store 的卡片推荐做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名为:熊帮手。

图片

 

案例 2  微博长按点赞按钮,可以选择不同的点赞状态。图标还是动态的,很有趣。

图片

 

案例 3  淘宝双十一预热,首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样,烘托氛围又打了广告。

图片

 

案例 4  微信拨打语音的界面,在等待好友接听的过程中,可以看到好友朋友圈的图片,缓解用户等待时的无聊,也为即将进行的语音聊天提供了话题。

图片

 

2. 行为层 —— 细节引导

对于行为层,设计师需对用户的行为进行预判和引导,利用细节处理打动用户,让用户对产品产生信任感和依赖感。

 

案例 1  :当苹果公司发现用户最近在官方渠道购买了新的 iPhone ,老 iPhone 的设置页面就会给出提示,让用户为新的 iPhone 做好数据迁移准备。

图片

 

案例 2  iOS 系统后台在看缩略效果时,会将用户的敏感、私密的信息的 App 页面进行模糊处理,保护用户的隐私安全。

图片

 

案例 3  :在屏幕很暗的情况下,打开微信支付二维码,屏幕会瞬间亮起,便于商家扫码付款。

图片

 

案例 4  货拉拉在展示搬家车辆详细信息时,使用了剖面图,并模拟了不同搬家场景下的家具内容,让用户更好估算车辆空间。

图片

 

3. 反思层 —— 认知共鸣

对于反思层,设计师要调动用户最深层的记忆和感知,将视觉效果、产品功能和用户认知紧密结合,形成用户对于产品和品牌的深刻认知。

 

案例 1  FigJam 是一款来自 Figma 的多人协作在线白板工具,可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能,比如:当两个人同时长按 “H” 键时,就会出现 highfive(击掌的动效),非常适合当设计师达成共识时使用:

图片

 

案例 2  小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉,所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐,让人会心一笑。

图片

 

案例 3  饿了么在异常天气下通过在界面上增加天气的元素,让用户看到外卖小哥的辛苦,使用视觉和内容共情,唤起用户的同理心,降低用户因外卖迟到而做的投诉和差评。

图片

 

案例 4  QQ音乐上线了宠物功能,一共有五个品种的宠物让用户可以选择领取,多听歌能喂饱宠物,然后送它出去参加演唱会或者和好友进行互动。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「情感化」设计优秀案例(二)

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

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

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

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


设计的「七宗罪」

seo达人

一、差不多主义

差不多主义:凡事都觉得差不多就行了,不是特别注重设计细节。

如果每个部门都是“差不多主义”,我来给你算一下最终实现的产品会变成什么样(我们就按还原度80%来算)。产品 → 交互 80%,交互 → UI 80%,UI → 研发 80%,最后则:80% x 80% x 80%=51.2%,最后实现的只有预期的 50% 左右,这个产品还怎么用?

图片

每个设计师都要成为“处女座”像素眼,如果你只是为了想快速完成工作而搞出粗制滥造的设计,你的价值也很难体现出来。而且现在互联网已经发展的比较成熟,很多产品差异化并没有很大,如果你连细节都处理不好,要你何用?要在有限的时间内做出更精细的产品,打造完美产品,拒绝粗制滥造。

而且近几年很多公司对【产品体验】越来越重视,比如我司就把前端部门改名为体验技术部,旨在全员打造高质量、优体验、重设计的产品。研发都注重体验了,你再“差不多”就真的差多了~

同时,有的设计师不善言辞,在对接需求或设计澄清的时候不会坚持自己的想法,有时候就算自己是对的,也会在其他人强势的情况下败下阵来。所以作为设计师一定要敢于力争,强大的沟通能力也是职场晋升的一个重要表现。

 

二、拿来主义

抄袭:你直接叫我名得了。

开始之前我们要区分一下抄袭和借鉴的含义。我专门查了下词典,根据《现代汉语词典》的解释:抄袭是把别人的文章、作品私自照抄作为自己的去发表,并且实质性相似;借鉴是与别的人或事相对照,以便取长补短或吸取教训。区别在于前者是“照样抄录”,后者是“参考仿照”。

把借鉴当做寻找灵感对任何设计师来说都是一个自然的过程。

学过美术的都知道,画画前期都是需要临摹的,这个就是借鉴、学习的过程,如果你拿临摹的画去商用,那肯定会被打~

我们经常做的竞品调研就是借鉴的过程,去了解竞对都有哪些值得学习的地方,哪些地方做的不好不适合我们,我们可以创新的。

不要直接把竞对的产品拿过来抄,一些初级产品经理就会经常这么干,看竞对有什么,他们就抄;竞对是怎么处理了,他们就怎么处理。永远跟不上市场的脚步,别人都产品化了你才开始搞,吃屎都赶不上热的~

图片

设计真的很辛苦,我们可以把别人的作品作为“日常练习”,去从中学习原作者是如何思考、设计的。如果你拿他做除学习外的任何其他用途,都是不允许的。

其实设计已经发展到了几乎不可能 100% 原创的时代,我们就是要把所学所见混在一起,创造出一些新的设计。解决方案永远不止一个,思维够活跃,就有千万种可能。

图片

在数字时代,你拿别人的设计搞事情,是藏不住的,我平时发一些“曝光抄袭类”文章的时候,浏览量比平时都要高很多,大家对抄袭还是很关注的。

平时我在面试的时候,如果你是“拿来主义”,一眼就会被看穿的,不要问我怎么看出来的,看多了你也就能一眼望穿了。

借鉴总是好的!但不要复制TA的风格或元素,试着创造你自己的风格和想法,这样才是好的借鉴形式。

 

三、不拒先生:从来不拒绝需求

这种“职场好人”性格其实是非常可怕的。不是所有的需求都是合理的,也不是所有的需求你都能做。但只要你接下了,你就要负责到底。

新手容易犯的一个错误就是:不会评估工作量,leader 给你工作的时候他会有个时间预期,但有时候也不是完全准确的,你要自己评估在这个时间内是否可以完成,完不成的话就要 say no,重新规划时间。

还有一个比较容易犯的错是:leader 给你任务,你为了凸显自己工作效率高,来几个需求接几个需求,完不成的话就自己硬扛着熬夜加班加点,虽然说这样可以多接触需求快速成长,但长此以往,如果有个需求加班加点都搞不出来,你又承诺了没问题,最后没完成导致研发延期了,只能你背锅。

要适当的合理安排需求,不要工作一年,加出来三年工作经验,你这是卷谁呢?

图片

在设计澄清的时候,别人反馈的问题做记录,然后思考合不合理,不要一有质疑声你就觉得自己的方案不行,就改改改,有的质疑是合理的,有的不合理,你要有判断,设计决策你来把控。

图片

平时自己做好需求的时间规划,细化到小时维度,这样别人再问你有没有时间接需求的时候,你就可以理直气壮的告诉他有 or 没有。

还有一个需要注意的就是,跨部门的上级找你做东西的时候,一定要让他找你的直属 leader,保证需求的统一入口,这样对大家都好。之前我部门就有个设计师,别的部门领导就老直接找他做东西,然后回头我们老大找他要之前任务结果的时候,他才说没完成~

摸鱼法则第一招:我很忙,需求往后排~

 

四、多情:今天喜欢他,明天喜欢她

产品化的界面可不是你喜欢什么就设计什么的,要考虑整体风格。尤其是 B 端产品,风格统一和样式延展性是必要考虑的因素之一,你可以有个性化,但不要跟现有风格违和,适合的才是最好的。

当然了,这么说不是让你不要创新,是在原有地基之上创新产品。你设计的再好看,红杏出墙了有何用?新手和老手的区别,在于一个只关注当下,一个考虑全局。初级只会把当下做的尽善尽美,活灵活现;老手会在保证全局完整性的前提下最大化的产品创新和易用。

图片

每年流行的设计风格是不一样的,专注视觉展现的产品来说,可以追随设计潮流,展现最新的设计风格是没问题的。但是像 B 端产品,风格迭代是要有时间周期的,而且大部分比视觉风格的周期要长,所以每次大改版的时候,要考虑未来的设计趋势。

刚才我也提到了,最佳方案永远不止有一个,找到适合自己产品的就可以,如果有一些方案都觉得不错,可以做 AB 测试,选出最好的方案做产品化。

鼓励多看、多学,自己思想加工好了融合到产品中,而不是一味地直呼:这个设计真 NB!我也要用!

 

五、感性大于理性

字面意思很好理解,之前我们都说设计师是感性的,但是当设计与商业结合,就不能是纯感性的了。任何的产品设计都是基于数据、基于市场需求。我们大部分设计师都不是艺术家,都在为连接商业而努力。

而且设计师也在向理性化慢慢发展,拿设计师的价值来说,之前是很难被体现出来的,现在因为和商业结合,价值慢慢的被体现出来、慢慢可量化了。

我们在做产品设计的时候也是这样,基于调研和分析来做产品,而不是天马行空,想到什么做什么。设计从感性逐步走向理性,也是一个成长的过程,一切以结果为导向,善用理性思维思考问题,会更让其他人信服。一切设计都有理有据,和别人 battle 的时候也不怂~

ps:在和女朋友交往中恰恰相反,切记~切记~~

 

六、妄想:可以创新,不要妄想

一切设计都是以结果为导向,YY 出来的飞机稿只能送到村东头的厕所里。我们在脑暴设计方案的时候,一开始都是天马行空,想到什么就写什么,但是最终都会聚焦到产品上,缩小聚焦点,最后产出可落地的方案。

图片

设计师的创新能力是很重要的,为什么企业在招人的时候,会更看重年轻一些的呢?因为他的脑洞是打开的,有更多的 idea 迸发出来。如果你只是循规蹈矩的维护产品迭代,迟早会被淘汰。

设计本身就是一个开阔脑洞的一群人做事情,所以早些年设计师的价值是无法被量化的,近几年都在讲量化指标、结果导向,设计师的价值也慢慢的被量化出来。

一个好的产品设计师输出的方案不一定是最完美的,但是绝对是在能落地的基础上接近完美的。不够完美我们可以再优化,如果一直停留在 YY 层,永远不能落地实现,那你的价值何在?

我相信大家在面试的时候也都感受到过,线上作品远比飞机稿要重要得多,因为他可以验证你的方案是可行而不是你自己 YY 的,公司招你来是让你有具体产出的,不是来让你当艺术家烘托气氛。

我们经常会在大胆创新和为了功能上线的边缘试探,哪怕是多一点点的设计元素加进去,也是我们努力的结果。

要记住,我们是设计师,在飞翔的时候看清边界在哪,我们是带领世界品味走向的一群人,可以创新不要妄想。

 

七、炫技:装饰性大于内容本身

最好的设计就是不用设计,最好的设计是简单的。

部分设计师在出方案的时候,为了凸显自己的设计能力,会有意无意的增加一些装饰元素设计,然而页面的承载量是一定的,装饰性的设计过多会直接影响用户找到页面中的重要信息。好的设计不需要过多的装饰,苹果的极简风就很棒,一直沿用至今。

其实现在产品上并不是装饰的重灾区,作品集才是!我们团队在招人,每天能看到大量的简历,确实有很大一部分人为了凸显设计能力,把作品集做的五彩缤纷,整成了大杂烩,而且装饰性的元素、样机比以往工作项目的占比还要多,这不就喧宾夺主了吗?这样的作品集基本就无缘了~

在设计之前,一定要了解最终目标是什么,然后基于目标再拆分行动项,把不必要的内容直接砍掉,用户在浏览页面的时候,有效时间就 3 秒钟,3 秒钟没有找到自己想要的内容,就会流失。

我们只会吐槽老板的那句:“放大放大再放大”。其实深入想一下,他只是想要突出一个点而已~

不要捡了芝麻丢西瓜。

 

写在最后

设计中有很多很多的问题,我们也都是在不断的摸索中成长,今天给大家分享了几个典型的“罪”,希望引以为戒,哪怕其中一点对你有帮助,也不枉码这么多字~

今日金句:

在非洲大草原上,无论你是狮子还是羚羊,每当太阳升起,你唯一要做的就是奔跑。

图片

叮铃铃~~下课!

 

原文地址:友设青年(公众号)

作者:Luckgg

转载请注明:学UI网》设计的「七宗罪」

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

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

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

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


业务想大多全,用户要精准简,首页设计该如何破局?

seo达人


图片

“不行,这个必须在首页!另外我还有俩新业务入口,你想想办法”,业务方出于对流量的考虑,总是希望做加法。

“别整那么多没用的,我就想找个xx,剩下从来不看的”,用户出于效率体验,总期望做减法。

加减之间,是业务与用户对立而尖锐的需求,同时也是多类型服务产品首页设计的重难点。今天,就以“58首页设计”为例,与大家谈谈解题思路。

 

01.什么是多类型服务产品?

简单说就是,多个关联度较低的服务捆绑在一起形成的产品,常见于平台式工具产品,例如支付宝、美团、58同城等。

 

02.设计挑战是什么?

以58为例,一方面,业务工具属性强,且用户耦合性低。说人话就是,用户都是来找工具的,但由于AB业务关联度太低,用A业务的用户几乎不会用到B业务,AB业务分别拥有独自用户群。这也就造成用户期望更高的推荐精准度,页面上任何一个无关信息都是干扰,都是对连接效率的打折。

但另一方面,平台上的业务很多,还都想在首页曝光。而且随着各业务设计师的不断努力,连接的形式也在不断丰富,视频、直播、VR,从业务贴到聚合推荐,层出不穷。首页面临更大的信息承载压力。

所以,这类型产品首页最大的挑战,就是“多业务的曝光需求和用户的精准连接之间的矛盾”,如何才能在推荐技术不变的情况下,通过设计来应对挑战呢?

 

03.如何破解?

既然是信息传递和收取之间的矛盾,那我们就从“人-场景-信息”的对应关系入手,分析信息在不同场景的优先级和适合的颗粒度。

图片

人-场景-信息优先级和颗粒度

 

1、用户分类

根据用户需求分为三类。

1)预装用户:非自主下载,不了解产品功能

2)服务需求用户:使用相对固定的服务

3)内容需求用户:获取本地或相关服务信息

2、按照用户区分场景需求

1)预装用户:建立产品认知、保留用户不卸载

2)服务需求用户:更有针对性的服务展示,尽可能少的干扰信息

3)内容需求用户:更多类型的内容展示

3、按照场景定位信息的优先级和颗粒度

1)预装用户:

采用运营曝光策略。保留一级主服务入口,帮助建立产品认知。同时曝光更多内容信息和留存向的运营功能,以提升留存率。

图片

预装型用户信息

 

2)服务需求用户:

采用目标服务曝光策略。保留一级业务主服务入口,方便业务切换。但扩展目标服务的二级信息曝光度,用以缩短路径。同时增加动态服务模块,来跟进用户动作,服务于用户。

图片

服务型用户信息

 

3)内容需求用户:

采用平衡曝光策略。保留一级主服务入口,方便业务切换。同时扩展内容曝光度。

图片

内容型用户信息

 

04.设计思路

1、搭建扩展性框架:调整为顶部tab结构,释放更多定位信号,增加曝光渠道。

原腰部tab是对“原首页”内容的划分,现将整个“首页”置于第一个tab下,后续tab内容将与“首页”并列,从而释放更多独立的曝光渠道。

图片

腰部tab结构
 

图片

顶部tab结构

 

2、使用更灵活的组件:变形金刚与瀑布流。

首先,金刚位是一级服务入口的集合,且处于首屏上部,是非常好的建立产品认知的模块。将其原有打散在15个位置上的服务,按照大类聚合安置,更容易传达产品的主服务是什么。

图片

金刚位结构对比

 

其次,为了应对用户精准简的需求,金刚也可以做灵活变形,曝光更多目标服务的二级选项。

图片

变形金刚位

 

而瀑布流方式也为更多样的服务连接形式提供了承载能力。

图片

列表与瀑布流

 

3、丰富的信息容器:

设计包含图、文、图文、VR、视频、聚合类目、动态服务模块等信息聚合方式的瀑布流卡片,同时加入即时推荐功能,让瀑布流具备包容和灵活的特性。

图片

组件容器

 

4、整合平台的运营能力:设计平台级留存向运营中心。

以往,各业务线运营功能深藏在业务页面中,用户往往需要通过较长的路径才能接触到运营功能,且用户也并不能发现平台上所有运营功能。这种分散式分布的方式,使得运营吸引力和留存能力上都打了折扣。现将所有业务的运营功能聚合,打造平台的运营中心,使发现路径更短,聚合吸引力更强。

图片

原路径&现路径

 

图片

默认服务型首页&上滑2楼运营中心

 

05.设计展示

图片

从依靠推荐技术让内容适应用户需求,到设计灵活可变动的组件来适应chang场景的信息承载,我们希望可以在产品和用户需求的矛盾中寻求更优的平衡点。

 

 

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》业务想大多全,用户要精准简,首页设计该如何破局?

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

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

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

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

超喜欢,这个AI小技巧!

seo达人


图片
 
什么?还有人不知道这种字体效果是怎么做的?
好吧,就让可爱又迷人的星火君把这个方法分享给你们吧!

开始学习啦!

 

教程步骤

图片

图片

图片

图片

 

1.打开ai

输入文字。鼠标右键单击,选择变换——对称,之后选择水平,并点击复制。

把文字镜像复制一个。

 

图片

图片

 

2.符号面板

整体旋转90°,并调出符号面板。选中文字,鼠标拖入符号面板备用。

图片

图片

图片

图片

 

3.画圆

用椭圆工具制作一个正圆

之后选择效果——3D——凸出和斜角。勾选预览,调整角度和凸出厚度。

之后点击贴图,勾选三维模型不可见,选择第3个面,符号选择我们刚刚拖进去的文字,也就是新建符号,点击缩放以适合,让文字贴合画面,点击确定。

再稍微调整角度,调到合适的位置,就可以了。

 

图片

图片

图片

 

4.扩展外观

之后对象——扩展外观。

右键取消编组,再右键释放剪切蒙版。

这样就可以随意更改文字颜色啦。

图片

看起来步骤很多,其实操作起来还是很简单的。everybody,学起来啊!

那小分享就到这里吧,下期再见哦~

 

原文地址:诗人星火宇宙(公众号)

作者: 星火君

转载请注明:学UI网》超喜欢,这个AI小技巧!

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

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

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

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


G端可视化中的适老化设计

鹤鹤

前言


调查显示,2020年我国老年人口达到约2.43亿,占比18%,50岁以上的网民群体占比22.8%,G端可视化面对的主要群体就是政府领导,而政府大领导普遍都是市级及其以上,年纪大多数为60岁往上,属于适老化的涵盖范围,因此探索适老化在G端大屏中的体现,也是很有必要的。

有人说:适老化是减少操作,注重呈现,是在设计方案中的体现。并且适老化设计,本身也是给老年人群体的一种特殊定制。

在我眼里看来:G端可视化大屏本身就是面向定制化,不存在特殊化或普遍化,因为他的群体本身就是老年客户,既然是这个群体,那么适老化就是我们设计师需要考虑的。



一、通用性和包容性设计


首先一般讲适老化无障碍设计,我们都要提到的就是通用性设计和包容性设计。


通用性设计


原则:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。

百度百科将通用设计定义为:“能被失能者所使用,就更能被所有的人使用。通用设计的核心思想是:把所有人都看成是程度不同的能力障碍者,即人的能力是有限的,人们具有的能力不同,在不同环境具有的能力也不同。”

通用设计中应当也包含对于特殊人群的基本考虑,要让目标人群觉得:鱼和熊掌都可兼得,既照顾了特殊人群的使用,又兼顾所有人。



包容性设计


则 :好的设计应该满足尽可能多得使用者的需求。

百度百科将包容性设计定义为:包容性设计着眼于清楚源于使用主体而造成的各种障碍,使每个个体都能平等、自信、独立的正常使用,为同一适用条件下的互动提供了新的视角,也为创造性和问题解决导向的设计提供了机会。


那么我们应该如何践行通用性和包容性设计在G端可视化中的理念呢?



二、客户的困境-现状分析


通过分析客户的困境,结合现状进行深入分析,发掘政府端客户的普遍性存在的问题。


年龄分布适老


大多数政府省市级领导人的年纪均在60左右,由于年龄普遍较大,对于设计的认知会有偏差,对于审美的把控以及设计本身的价值理解会偏弱。

从去年十月上旬开始,省级党委换届拉开大幕,在至今近8个月的时间里,全国31个省区市先后展开换届。经过此次换届,干部队伍的年龄结构得到进一步优化,初步形成“50后”为主导、“60后”渐成中坚的格局。

根据公开资料统计,31省区市书记平均年龄为58.1岁。其中,“40后”书记有6位,“50后”有22位,“60后”也有3位,某区党委书记胡XX和XX省委书记孙XX同为63年出生,是最年轻的书记。



生理机能下降


视力:老年人视力的下降,影响眼睛对空间、颜色、明暗等加工等;

听力:听力弱化造成的听不清楚,尤其是在嘈杂的环境中,老年人听起声音来会更吃力;

表达力:专业化的术语以及需求,会使表达和沟通不便;



认知能力不足


互联网和人工智能等技术发展变化太快导致认知力的不足。

绝大多数的老年人对现在数字化的产品很陌生,再加上复杂的界面操作,需要反复的学习使用才能熟悉掌握。



三、设计的探索-客户心理


ToG类型的项目,我们的客户群体是政府的某个部门(G端行业中,政府部门因为权限和管辖内容的不同,客户的诉求也会不一样,同时由于决策层是一级一级往上的,对于各个层级的领导都需要去进行满足,对于设计的要求也就更高了),因此我们需要对客户的心理进行重点挖掘。


1、政府部门客户的特点


  • 严谨务实原则

政府部门的领导或者员工大多数都是高知人群,对于工作的态度都是非常严谨,喜欢按规矩办事,分工明确,力求事情做到一丝不苟,有理有据,讲究严谨做人,务实做事。


  • 安全性原则

政府部门的保密工作需要做的非常到位,尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好,基本都是内网开发,私有化部署,一切互联网的东西连接内网都会报警。如果是外网开发,则需要做好数据存储,一定要非常注重数据安全。


  • 实用性原则

政府类的软件或者产品,基本都有很强的实用性,实用好用才是客户最关心的问题,因此在系统架构上需要做到,简单高效,快速触达,减少客户的学习成本。


所以针对政府客户特点,我们需要做到严谨务实的态度,安全实用,简单高效。



2、政府部门客户的需求


  • 正文字要大

对于文字大小的需求比较强烈,提及最多的就是字体放大,加粗。


  • 屏幕要看清

对于画面能够看清,需要重点表现在前景和背景的色彩对比度。


  • 画面要酷炫

对于画面的表现,要更加的酷炫,在客户眼里,动态图形效果远远大于静态效果图。


  • 饱和度要高

随着年龄增长,人类的晶状体会变黄变浑浊,导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果,从而降低元素在界面中的对比度, 因此需要提高色彩的饱和度。


  • 逻辑要清晰

产品整体架构以及内容逻辑清晰,简单高效,上手简易。


所以针对政府客户的需求,我们需要做到画面清晰,视觉酷炫,色彩明亮,逻辑清晰。



四、策略的应对-解决方案


通过对政府类客户的分析,挖掘客户最深层的需求,针对于以上的关键点,提出适合的解决方案,大体在一下6个方面的全面解析。


1、解决方案:框架


对于系统框架以及布局进行一屏式展示,减少系统层级的递进。

对于展示形式上可以更清晰准确, 尽量模块化展示每个需求,做到聚焦用户视角,提升画面表现。

整体交互流程简化,复杂以及多层级弹框尽量少使用。



2、解决方案:字体


  • 中文字体

中文字体类型的使用,在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。


  • 英文字体

英文字体类型的使用,英文数字的字体选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN字体。


  • 字体大小

字体大小的定义。在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常1080P页面,最小字号不小于16px,具体字体大小还需要参考设备清晰度,环境灯光,视距等因素。




3、解决方案:颜色


  • 颜色对比

界面中的前景与背景的对比度,是否足以让政府类客户清楚识别;

颜色不应该用作传达信息的唯一视觉手段,需要用额外的文字提示;

通过 H(色相)S(饱和度)B(明度)的数值来划分色域,在保持H值不变的前提下,定义了10个色域。所以在前后景的颜色选择上,满足跨度至少为6,才能让目标人群准确识别文字信息。


  • 对比度检测

视觉呈现以及文案图像对比度至少要有7:1,大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标,如Contrast Ratio 在线检测工具:

https://contrast-ratio.com/



  • 颜色多样

画面采用多种饱和度较高的颜色,而不是单色;

颜色的丰富程度决定了画面的视觉表达,色彩越丰富,画面表现越好;



4、解决方案:图形


增加图形的占比大小,提升视觉上的表现;

尽量采用识别度较强的图形和图标,尽可能贴近客户的认知范畴;

图标和图形尽量搭配文字描述,方便客户更清晰更快速理解。



5、解决方案:视距


观测距离的远近,也决定着画面的展示效果,尽可能的拉近观测距离;

正常视距观测下,以常规设计规范去制定即可,如若观测距离较近,则可适当缩小相应的视觉表现,反而观测距离较远,则放大视觉。



6、解决方案:设备


设备的尺寸、精度,分辨率大小都会影响目标人群的体验;

在设备精度较低,或者说点间距过大时,应当适当放大视觉表现,点间距小的则显示非常清晰,可适当缩小视觉表现。



五、规范的提炼-应用推广


为了保证适老化的推广,需要在适老化的基础上统一标准,在字体,颜色,框架,图形等内容上做出提炼,深入了解目标客户的需求以及客户心理。

本着严谨务实,安全性,实用性等原则,沉淀出一套符合目标人群的设计规范,应用并推广到不同设计团队以及推广到广大设计师中去。



六、未来的期许-设计使命


我们需要不断践行适老化设计原则,体现设计的通用性和包容性,应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代,虽说政府类客户会比普通人更容易接受,但是受制于某些原因,推动解决老年人面对智能技术的问题解决才是重中之中。

设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。



七、全篇总结


1-不要依赖颜色来传达信息(客户更喜欢文本,有特殊含义除外:四色预警,国标色);

2-文字展示要清晰,字号大小要更加适合目标群体;

3-提高颜色对比度,丰富画面色彩,禁止使用单一色系;

4-界面中重要元素应尽量避免使用蓝色(特殊行业除外:公安等其他);

5-增加图形以及图标的视觉表现,尽可能做到一目了然,便于客户理解;

6-尽可能拉近观测距离,提升观测体验;

7-选用高性能,高清晰设备,提升观感,优化客户体验;

8-针对政府客户特点,做到态度严谨务实,安全实用,简单高效;

9-针对政府客户的需求,做到画面清晰,视觉酷炫,色彩丰富明亮,逻辑清晰;

10-盲目照搬照抄而不去具体问题具体分析,这些无障碍设计在某种程度上就会成为“障碍”设计。

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

文章来源:站酷。 作者:  AYONG_BOR
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

思考数据可视化应用设计规范

鹤鹤


一、图表的分类介绍以及应用范围


一提到图表,大家脑海里浮现的,通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类,经常会导致图表的误用。

图表的作用,是帮助我们更好地看懂数据。选择什么图表,需要回答的首要问题是『我有什么数据,需要用图表做什么』,而不是 『图表长成什么样』 。因此我们从数据出发,从功能角度对图表进行分类。






二、画面布局在实战中的应用


在画面中我们经常会遇到各式各样的屏幕分辨率,有大屏的LED屏,有平面显示屏,数字拼接屏等等。那么具体的项目中我们如何去定义这些不同尺寸的屏幕来进行画面布局呢?



如若有其他分辨率下的屏幕,按照这个规律的基本布局,尽量使组件呈现16:9比例排布是最好的;超长分辨率下的大屏设计或者拼接很多块显示器的大屏可以通过具体业务内容来展示,按模块去划分,功能点明确即可。

此处布局只是我个人觉得比较合适的展示方式,并不代表一定是需要这么排布,还可以有很多的形式去布局。也可能因为业务不同,版式也会有调整,不过万变不离其中,掌握基础要素,其他分辨率下照样可以有很多编排形式!





三、硬件常用尺寸以及设备


Led屏幕


1、点间距不同


p3点与点之间的距离是3毫米,p4点与点之间的距离是4毫米。


2、清晰度不同


P后面那个数字越小,代表两个灯珠之间的距离越小,清晰度越高,相对应,价格也会高,因为每平方的像素点P3比P4多很多,成像效果好。


3、最佳可视距离不同


点间距P3(3mm)的显示屏,它的最佳可视距离是3.5~10米,点间距P4(4mm)的显示屏,它的最佳可视距离是5~13.5米。可以根据自己的实际情况,选择最适合的型号。



拼接屏


拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px(在这里感谢我的数学老师)


现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵。


另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙,设计时千万不能跨屏设计,不然很影响美观。





控制端


目前企业用的最多的控制端为ipad控制,需要在ipad上制作出控制端页面,一般尺寸为2048*1536,控制端大多数为按钮操作,页面尽量简单明了。





四、字体字号以及画面配色631


字体字号


在数据可视化设计中,一般选中的字体有如下几种:

  1. 中文字体:苹方,思源黑体

  2. 英文字体:DIN,DIN-PRO

  3. 数字字体:Exo

正常1080P情况下,由于甲方大多数为政府机构,文字要求会比一般的要求大一点,一般都是选择最小16px。字号不是固定的,人是活的,规范是由人制定的,切勿迷信规范。



配色法则以及颜色选用


运用配色631法则,将配色定义为主色60%,辅助色30%,对比色10%去贯穿整套界面文字的颜色通过重要、普通、次要去分配,是带有色彩倾向丰富页面视觉。

在数据可视化设计中,由于大屏是偏暗的,所以需要选择高饱和度的色彩,并且需要选择统一的颜色,保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候,在选用时尽量选用饱和度不要太高的颜色,不然画面会很不协调,也就是所说的晃眼。



在设计过程中尽量选用深色背景作为画面主背景,这个可以解决大屏因为色差问题,对整体页面的影响,用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体,画面效果更好,更能体现流光、粒子、发光等酷炫效果。

同时,大屏由于有色差,尽量不要使用渐变色,如若需要使用需要到达现场,根据大屏反馈的色差,现场调整,但还是推荐尽量使用纯色。




五、画面饱满以及页面装饰点线面


画面如何饱满


方式一:字体的饱满

将字体处理后,空白面积减少,整体更饱满了些

方式二文字的饱满

正常情况下为使阅读更方便,标题间距给-10%~20%为佳。

通常数字会比汉字小,为使基线对齐,数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡,建议主标题是副标题的1.5倍。



方式三关系的饱满

当A=B时,图标和文字的关系会混淆,这种情况下要满足B>A,用间距分层次


采用黄金分割0.618值。也就是横向21个小方块,竖向13个小方块。此时,最优雅的板式是A>B的间距,1>2>3的间距。



方式四:图标的饱满



页面如何装饰会更丰富(如何运用点线面三大构成)


我们在设计的过程中,经常会因为画面不够饱满页面太空,收到客户的吐槽,下面就讲讲如何通过点线面来丰富画面,使画面更丰富更有层次感。


1.原画面设计完成



2.添加装饰线(点线面构成)




3.调整位置,丰富画面



在画面添加装饰的情况下需要给画面留足位置,数据可视化大屏本身面积就比较大,合理运用画面以及拼接屏缝隙添加装饰线,可以更好的减轻拼缝所带来的影响。装饰线的添加还可以在后期丰富画面动效,科技感十足,在页面中添加装饰线在我看来,非常的有意义,既可以丰富画面,又可以完善动效,一举两得。


在装饰线添加这一块,推荐大家多去看看国外的可视化设计,哪些几乎将点线面构成发挥到了极致。




六、画面动效以及素材灵感收集


动效制作


C4D+AE

在很多设计项目中会用到很多酷炫的科技模型,比如汽车、人物、地球模型等等,我们可以运用C4D来进行主视觉建模,再通过AE进行动效输出。




有的人可能会问在导入数据之后可能由于数据量不大的原因,动态效果不是很明显,在这种情况下,咱们可以把不变的数据量,做成AE动效,可以把动效导成json文件直接发给前端,能很大程度上保障画面动态效果。



素材灵感收集


Behance

在behance上有很多国外的设计师,他们的数据可视化设计做的都非常漂亮,极具代表性风格,我们可以通过behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图,同时可以把这些作品保存到自己情绪版中,非常的方便。


pinterest

从“书签”这个角度出发,我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。pinterest对图片的关注是最用心的,去除了其他的各种干扰,Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能,就是他能够自动筛选同类型图片,并且精准度非常高。



Videohive

这是一个专注视频模板和素材的网站(收费),在此可以搜索出很多的HUD动效视频以及高清图片。


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

文章来源:站酷。 作者:  AYONG_BOR
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



关于让设计工作流程更加高效的思考!

涛涛

项目的运作是需要多人合作完成的,在这个过程中会遇到内部和外部的各种的问题,我们这里主要讨论的问题属于内部问题,分人和事。


一、沟通前,多站在对方角度思考


项目大小不同,投入资源会有所分别,但是项目成员专业构成上却都基本是一致的。大家的专业背景不同,相互并不了解各自的工作,思维方式也是不同的,大家在讨论工作的时候也是习惯用自己熟悉的方式进行沟通,相同的事物会存在认知的差异,在传递、执行的时候产生偏差,从而影响目标达成的效率。工作中各自的工作都有不同的专业目标和标准,大家讨论问题都是奔着解决自己的专业目标去的,目标不同,诉求肯定就不一样。


如下图,只有三方达成共识才能做出“好的产品体验”对用户有价值、高满意度的产品,缺少一方都无法完成这个目标。


举例:开发在实现一个页面的时候,他们首先要考虑的不是页面好不好看的问题,而是从实现角度考虑技术方案、难度、性能;设计则是考虑视觉上的美观性、易用性;产品需求方则是考虑是否能满足需求,达成目标数据;在这个项目执行过程中,如果大家都坚持自己目标不让步,这个项目就很难进行下去,然后就有了“妥协”,项目的执行其实就是成员之间相互妥协、博弈的过程。这个过程需要项目团队不断的“磨合”,然后形成共识、工作上的默契。


“妥协”这里不是退让和降低标准,而是需要站在对方的角度思考,他为什么会要这样做?他和自己的方案哪个更有利于项目,如果他的方案有利,自己需要做出那些改变和投入?(这里要考虑可行性);如果自己的方案更有利项目,那就需要阐述自己方案的优势,有理有据说服对方接纳;这个过程必然是顺畅的,提升在执行项目时候的效率。


二、项目过程中,及时同步信息并达成一致


项目常见问题:项目从开始到结束会有很多个项目节点,在过程中因成本和难度,不断修改设计导致的结果偏差;参与决策者较多,之间没有达成共识,在项目不同阶段完成决策,导致的结果偏差;因外部因数导致目标的变化等等问题…


每个项目的流程都有不同的差异,但是多多少少都有上面提到的沟通问题和信息传递的问题,工作中我一直在思考如何更加有效进行沟通和同步信息。这里和大家分享交流一些心得和看法。


1、优化流程中的沟通、信息同步

明确流程节点上需要参与的人员,确保信息的同步触达范围;明确流程节点上需要完成的任务,并且有统一的输出标准、评价标准,让每一个人都清楚自己在做什么、如何去做;明确每一个阶段所需要达成的目标,让项目成员在项目进行过程中也清晰自己的任务,同时让新加入、合作的同事快速了解项目,提升协作上的效率,完成一致的目标任务


2、根据项目大小对流程进行分类

项目流程模块化,针对不同内型项目,明确任务需求模板:小项目(A任务) 、中型项目(A+B任务)、大型项目(A+B+C任务),


3、加强目标在项目中的一致性,建立高效的决策机制

通过项目阶段任务评审,及时将信息同步给项目成员,建立由“项目核心成员”和“决策者”组成的“评审团”,有分歧和问题的时候快速决策,解决问题;避免只讨论不做决策的会议,因为永远都是没有结论的


项目经历和思考


再过往的项目经历中,不同公司在不同文化背景下对于项目的流程管控和要求有着比较大的区别。


  • 互联网公司文化是比较看中体验的,这种思想是从上至下的,所以再遇到有分歧问题的时候大家有一个共同的判断标准“这样做是否会伤害用户体验?”,在此基础上再去讨论我们应该这么做,相对比较容易达成共识;

  • 在手机厂商做项目时,对用新增用户的压力没有互联网公司那么大,用户量的增加主要看手机卖的好不好,怎么盘活现有用户,提升活跃增加转化才是目标。所以更加看中的是用户运营,在挖掘用户需求的同时,更多的是考虑如何吸引用户;

  • 放在制造企业里软件项目只是整个产品项目流程中的一部分,项目按时上市是优先级最高的目标,其他节点在此时间倒推,硬件的时间往往是很难压缩的,不然卖出的产品质量无法保证就是很大的问题,所以往往可能被压缩的就是软件和产品开发的时间了(硬件产品项目相比互联网产品其实已经提前很长时间规划了,但是市场的变化太快)这样的事情时常发生,也无法避免,所以只能尽早做好规划、储备才能从根本上解决硬件产品在软件流程上遇到的尴尬问题。


最后谈点个人的观点,现在科技发展迅速的大环境下,用户被培育的忠诚度不高且善变。从鹅厂开始新起“微创新快速迭代”并不适合制造行业,也可能不在适合现在互联网,因为现在的“爆点”事件都是发生在创新的产品上,微信不是QQ迭代出来的,大疆也是通过自己的不断创新赢得了市场。想要做出领跑市场的创新产品,就需要挖掘更深层的用户需求实现“创新产品的规划和储备”,想的更远才能更有效率的创造对用户有价值的产品。





文章来源:站酷 作者:Midea_IoT_UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

如何在企业官网刻入品牌DNA?

涛涛

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


文章来源:站酷 作者:增长超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


听说这是最难的配色方法——互补色篇

lanlanwork


01 互补色的定义

互补色分为“光学互补色”和“印刷(色料)互补色”两种。

光学互补色:两种色光以适当的比例混合,能产生白光时,则这两种颜色就称为“互为补色”。

本文主要探讨的是印刷(色料)方面的互补色:在色相环上相对180°角的两种颜色,这两个颜色混合会得到灰色。

图片

互补色由于在色环上相距最远,色彩差异最大,色彩对比很强烈,合理的搭配往往会产生强烈的视觉冲击力。

虽然从色环上来看,互补色可以有很多组,但最常用的互补色有3组,分别是红和绿、蓝和橙、紫和黄。

 

图片

由于红色和绿色在色相上缺乏共性,放在一起会造成极强的视觉反差,搭在一起容易有格格不入、扎眼的感觉,容易出现散乱、土气的感觉。

要取得好的视觉效果,则需要使用一些调和手段,可以在明度、饱和度上中和两种色彩的突兀,使其形成和谐统一的对比。

图片

图片

 

图片

蓝橙是一组经典的冷暖互补色,温暖的橙色在与偏冷的蓝色搭配时,更加醒目,活泼的橙色可以很好的缓解深蓝色的沉闷,增加画面的愉悦气氛,可以很好的营造出画面的层次感。

图片

图片

 

图片

紫色和黄色不论是色相还是明度差异都非常大,因此黄色与紫色的搭配容易产生相当高的视觉强度。

图片

 

02 互补色配色的方法

互补色对比性强烈,因此在视觉上会产生极大的隔离作用。由于色相对比过大,配色难度也最大,如何化解互补色之间的冲突感,是用好互补色的关键。

 

1.通过面积比来达到平衡

如果使用面积相近的互补色的搭配,具有强烈的冲突感,产生的视觉效果强烈而鲜明,情感浓烈,令人记忆深刻。非常适合夸张的、张扬的情感表达。

图片

大多数情况下,我们会选择一种颜色作为主色调,大面积的色相占据主导位置,再用小面积的互补色去点缀画面。这样才能表现出主次关系和丰富的色调效果,色彩对比强烈却又不违和。

图片

 

2、调整明度与饱和度来减弱色彩冲突

高明度与高饱和的互补色搭配,对比强烈,在视觉上会产生极大的隔离作用,它们组合在起,会产生相互衬托、相互抗衡、相互排斥的感觉,并使各自的色相更显突出,更为艳丽,具有强烈的视觉冲击力。

图片

可以考虑降低互补色的明度与饱和度,来减弱冲突,既保留了对比色搭配的特点,同时降低了过强的视觉刺激。

图片

 

3、加入中性色缓冲其强烈的对抗性

互补色鲜艳热烈,而中性色(黑白灰)则刚好相反,它们毫无情绪感,中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。通过中性色的调和,既保持了互补色所带来的丰富的层次感,也避免了互补色之间强烈的冲突。

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》听说这是最难的配色方法——互补色篇

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

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

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

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


日历

链接

个人资料

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

存档