Warning: Missing argument 3 for write(), called in /www/wwwroot/biwei1.cn/incs/robot.php on line 68 and defined in /www/wwwroot/biwei1.cn/incs/data.php on line 487
怎么在保证认知的前提下，设计一个视觉有趣味的 UI#迷你设计课下面这个热力图设计错了，但可以改好错误是给每个小“块”随机赋予了 5 种不同形状，按照直觉，每种形状会代表一个信息，实际上这些形状不表示任何信息…
发布时间:
1分
数据加载中
关注推特
收听电报
1
0

怎么在保证认知的前提下，设计一个视觉有趣味的 UI

#迷你设计课

下面这个热力图设计错了，但可以改好

错误是给每个小“块”随机赋予了 5 种不同形状，按照直觉，每种形状会代表一个信息，实际上这些形状不表示任何信息…

IT技术

 ( twitter.com )

由 倪爽 提交

怎么在保证认知的前提下，设计一个视觉有趣味的 UI

迷你设计课


下面这个热力图设计错了，但可以改好

错误是给每个小“块”随机赋予了 5 种不同形状，按照直觉，每种形状会代表一个信息，实际上这些形状不表示任何信息

这么说有点抽象，类比一下，你可以把这个热力图看作一个月历，每天的日期上都插了 1~5 朵数量不等的小红花……结果发现小红花的数量没有任何意义

为什么会有这么违背认知习惯的荒谬设计？为了增加设计的趣味（aka 让人觉得设计师很有创造力）

设计师故意把 Figma logo 拆分成 5 个独立的视觉元素/5 种形状（注），用在热力图里，乍一看就比 GitHub 那种传统小方块组成的热力图更有意思

这里我就不评价这种设计思路的优劣了，你们随便聊吧。既然我是设计顾问，我的工作是给出解决办法。怎么既在 Figma 工作时间的热力图里展示 Figma 视觉元素、增加热力图的视觉情趣，同时又不违背常识、妨碍用户认知，最简单的一种方式是利用动画

比如说：热力图载入时，每个“小块”每秒随机显示 10 次、每次显示 5 种形状之一，而后按照日期顺序，每个日期对应的“小块”逐一固定下来显示成一个圆形“小块”……最后所有“小块”稳定显示一个清晰、易于识别、信息完整而不存在误导的热力图

从逻辑上说，这个动画是利用动画、静止图案的差别，刻意在信息架构上增加了一层，把纯视觉的刺激和实际的信息（即每个“小块”的颜色深度）做了区隔，或者说把装饰性、趣味感的过场动画在视觉上强化，但在信息架构上弱化，让它们只刺激视觉，而不影响认知

趣味和逻辑并不冲突，如果你想清楚的话

注：还好 Figma logo 能拆分成几何图案，你试试拆分法拉利的 logo？一个马脑袋、四条马腿、一条马尾巴、内脏不知道怎么处理……

Markdown支持
评论加载中...
您可能感兴趣的： 更多
1
1
1

怎么使用 Sketch 设计与众不同的健身 APP

设计感超强、颇有趣味的 Any Distance，获得了今年的苹果设计大奖，有趣的是在 Figma 设计世间万物的大环境里，他们使用的设计工具是 Sketch…

IT技术

 ( twitter.com)

• 倪爽 • -- 点击
2
1
1

Nike 耐克品牌设计系统背后的秘密

来自设计公司的案例分析，介绍了他们为耐克设计“设计系统”的目标、方法和思路。比如说他们所要解决的最大问题，是怎么建立一个统一的设计系统，保证在大规模应用中保持耐克品牌的一致性…

IT技术

 ( twitter.com)

• 倪爽 • -- 点击
3
1
1

AI 时代，设计师怎么设计设计系统/Design System
#一边一边
今天我割草、收拾院子时听的播客，嘉宾是发明了 Atomic Design/原子设计 的 Brad Frost
他围绕设计系统，聊了一些很有趣的话题：
- 为什么要建立一个通用的设计系统？
他想在 HMTL

IT技术

 ( overcast.fm)

• 倪爽 • -- 点击
4
1
1

动手时刻：趣味视觉设计。

🧐

有趣

 ( twitter.com)

• 👁️ 我看好你 👁️ • -- 点击 • 下载视频
00:02:32
5
1
1

怎么感觉放开又是一顿折腾😂又要不断翻炒海鲜，跟金将军家差距太大了～
答：老百姓的诉求从来都不是完全放开，是保证基本生计前提下的优化。结果，迎来了在冬季流感季玩放开......笑。

时政

 ( twitter.com)

• 姑射山人2011 • -- 点击
6
1
1

有朋友问我，下个牛市 ETH/BTC币币天地单，能赚多少钱。我觉的这是大家都很关心的事情。
我根据自己的经验，来个保守估算。
打破一下大家的觉得赚不了几个钱的认知。

假设下一个牛市， $BTC 在前高68000的基础上涨60%不…

币圈

 ( twitter.com)

• 0xHaze.eth • -- 点击
7
1
1

我农场里的薰衣草精油提炼设备。
一年下来，我从买地，开始种地，10几个品种的薰衣草，学习怎么提炼，怎么加工产品，怎么设计包装，怎么推出产品，上线，营销，销售。 一条龙全部走下来，全部学会了。
可以正式在我的农场基础上扩大规模，建立有机美国🇺🇸制造的工厂。

时政

 ( twitter.com)

• Inty热点新闻 • -- 点击
8
2
2

计划招一个产品助理和一个初级视觉设计师加入谜底，协助顶梁柱和设计师姐姐完成产品和设计工作，帮助我落地更多想法，两年左右经验即可。全职，base 杭州，一年有半年在家上班。感兴趣的可以邮件我简历 tom#md.studio

时政

 ( twitter.com)

• 61 • -- 点击
9
1
1

怎么把图层混乱的 Figma 设计稿直接转为前端代码？

#设计AI

当然是用 AI。印度公司 Kombai 发布的新工具，可以从几方面理解设计稿：

- 自动识别一组看看来有关的视觉元素，并把它们整理成嵌套的、有逻辑关系的 html 元素
- 理解哪些是循环/重复的视觉元素
- 识别按钮、输入框等常见控件…

IT技术

 ( twitter.com)

• 倪爽 • -- 点击 • 下载视频
00:02:32

0.31147 Second , Gzip Enable.本网所有言论均来自网络，不代表本网站立场。 联系方式: [email protected]

©2012.11.21 bad.news All rights reserved. 社区自动运营第 -- 年 零 -- 天  
This site is protected by recha and the Google Privacy Policy and Terms of Service apply.

关注推特

').appendTo(document.body); } $(document).ready(function() { $("a.format_output").bind("click", function(e) { var tid = $(this).closest("div.entry").find("a.title").attr("vid"); if (tid) { clickCounter(tid); } }); });