网页设计

网页设计

网页设计

网页设计 ncbk 发表了文章 • 0 个评论 • 13 次浏览 • 2021-03-18 16:01 • 来自相关话题

运用7±2法则在网页和UI设计中

网页设计 ui设计 ncbk 发表了文章 • 0 个评论 • 38 次浏览 • 2021-03-16 16:52 • 来自相关话题

前言:在做网页和UI设计中合理使用一些法则,可以让我们的设计变的更有理有据,今天文章将介绍一个很使用的设计理论:7±2法则,并如何把它运用到我们界面设计当中。1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。 ...查看全部 >>

前言:在做网页和UI设计中合理使用一些法则,可以让我们的设计变的更有理有据,今天文章将介绍一个很使用的设计理论:7±2法则,并如何把它运用到我们界面设计当中。

1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。

运用7±2法则在网页和UI设计中

因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛,例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式,还有银行卡号、身份证号,我们总是喜欢把一长串数字拆分开来读写,目的就是降低记忆成本,提高信息的易读性,从而达到视觉防错的作用。

运用7±2法则在网页和UI设计中

Web导航栏选项卡数量不超过9个

在设计网页导航时,如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在7个左右(不超过9个),如苹果、Dribbble、behance等网站的导航分类。

运用7±2法则在网页和UI设计中

Web导航栏选项卡数量过多时

如果导航或选项卡内容很多,可以用一个树状层级结构来展示各级别关系,但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble,把更多子类别收在二级目录里。

运用7±2法则在网页和UI设计中

移动端选项卡导航

在移动端应用设计中,常见的电商app例如奈雪和乐凯撒分类模块,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻单品的效率。

运用7±2法则在网页和UI设计中

Tabbar区标签最多不超过5个

在移动应用设计中,底部Tabbar最少3个,最多为5个(几乎没几个超过5个),这样做除了减轻用户记忆负担,超过5个会降低视觉和操作上的体验。事实上就算只有4个,我们也经常想不起微信底部的4个Tab分别是啥。

运用7±2法则在网页和UI设计中

顶部导航栏页签

我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则,虽然在横轴可无限滑动,

但在显示区域只保持7±2法则的显示数量,例如马蜂窝、飞猪旅行等。

运用7±2法则在网页和UI设计中

金刚区图标不超过8个

我们常说的“八大金刚”就是一屏显示8个图标,超过的则放在第二屏。如果两行10个,往往第十个是“更多”入口,总的来说也没超过9个。

运用7±2法则在网页和UI设计中

banner文案不超过9个字

产品运营banner文案字数通常控制在9个字以内,在设计时也通常把长标题一分为二排两行,便于用户快速阅读,提升点击率。

运用7±2法则在网页和UI设计中

在交互设计中,7±2法则是减少用户认知负荷,提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性,避免在不断为产品添加功能时,破坏原有的视觉基础。

找不到配色灵感?这个网站给你100种选择!

网页设计 ncbk 发表了文章 • 0 个评论 • 23 次浏览 • 2021-03-16 13:58 • 来自相关话题

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:本文要介绍的「Tailwind.ink」是一个很有趣的色彩工具,以 AI 人工智能产生调色盘,依照说明,这个工具利用 Tailwindcss(CSS 框架)训练程序学习,当用户开启网 ...查看全部 >>

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:

本文要介绍的「Tailwind.ink」是一个很有趣的色彩工具,以 AI 人工智能产生调色盘,依照说明,这个工具利用 Tailwindcss(CSS 框架)训练程序学习,当用户开启网站、选择特定色调,Tailwind.ink 就会依照该色码产生 100 种相关色,像是偏向特定颜色或是加入深浅的渐变色,全部列在网页中就能轻松找到更合适的色码。

找不到配色灵感?这个网站给你100种选择!

Tailwind.ink 也是一项开源项目,如果需要可下载源码,依照说明调整为更符合自己需求的色彩产生器。

对于在选色时可能会遇到「颜色再深一些」或「偏向黄绿一些」这类情境,Tailwind.ink 能让使用者在配色时有更多更为弹性的组合方式,如果你透过色彩工具依然找不到适合的颜色,总是会有一点点差异,可以试试看以类神经网络训练出来的配色服务,可能更容易击中你的需求。

Tailwind.ink

网站链接:https://tailwind.ink/

使用教学

开启 Tailwind.ink 预设会是蓝色为主要颜色,右侧会显示依照该颜色预测出来的调色盘。

找不到配色灵感?这个网站给你100种选择!

在左上角的调色工具选择你想使用的主颜色后右侧色彩会实时更新,每个颜色名称下方会有对应的十种深浅变化,当然你也可以直接输入特定色码,套用你输入的色码来看看 Tailwind.ink 会产生哪些颜色。

找不到配色灵感?这个网站给你100种选择!

蛮有趣的是这些颜色组合都呈现一定规则的变化,无论是从浅到深、或是不同的色系,都能在单一页面进行预览或是比较,点选左上角的「Aa」可以在色块上显示文字,检查该背景显示深浅文字是否有良好的可阅读性和辨识性。

找不到配色灵感?这个网站给你100种选择!

值得一试的三个理由:

  • 使用 AI 类神经网络、依照主颜色产生 100 种相关颜色

  • 依照深浅和不同色调直接在网页上预览比较

  • 产生 HEX 色码可复制后取用颜色


怎么一步一步成为网页设计大咖?

回复

网页设计 ncbk 回复了问题 • 1 人关注 • 1 个回复 • 58 次浏览 • 2021-03-15 11:34 • 来自相关话题

网页设计需要学什么?

回复

网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 27 次浏览 • 2021-03-15 11:28 • 来自相关话题

网页设计是干嘛的?

回复

网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 27 次浏览 • 2021-03-15 11:28 • 来自相关话题

网页设计培训一般要多少钱?

回复

网页设计 网页设计培训 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 19 次浏览 • 2021-03-15 11:27 • 来自相关话题

网页设计需要学什么软件?

回复

网页设计软件 网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 26 次浏览 • 2021-03-15 11:27 • 来自相关话题

网页设计制作教程

网页设计制作教程 网页设计 ncbk 发表了文章 • 0 个评论 • 18 次浏览 • 2021-03-15 11:23 • 来自相关话题

网页设计

网页设计 ncbk 发表了文章 • 0 个评论 • 16 次浏览 • 2021-03-15 11:05 • 来自相关话题

网页设计和平面设计的区别?

回复

平面设计 网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 25 次浏览 • 2021-03-11 09:09 • 来自相关话题

怎么一步一步成为网页设计大咖?

回复

网页设计 ncbk 回复了问题 • 1 人关注 • 1 个回复 • 58 次浏览 • 2021-03-15 11:34 • 来自相关话题

网页设计需要学什么?

回复

网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 27 次浏览 • 2021-03-15 11:28 • 来自相关话题

网页设计是干嘛的?

回复

网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 27 次浏览 • 2021-03-15 11:28 • 来自相关话题

网页设计培训一般要多少钱?

回复

网页设计 网页设计培训 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 19 次浏览 • 2021-03-15 11:27 • 来自相关话题

网页设计需要学什么软件?

回复

网页设计软件 网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 26 次浏览 • 2021-03-15 11:27 • 来自相关话题

网页设计和平面设计的区别?

回复

平面设计 网页设计 ncbk 发起了问题 • 1 人关注 • 0 个回复 • 25 次浏览 • 2021-03-11 09:09 • 来自相关话题

网页设计

网页设计 ncbk 发表了文章 • 0 个评论 • 13 次浏览 • 2021-03-18 16:01 • 来自相关话题

运用7±2法则在网页和UI设计中

网页设计 ui设计 ncbk 发表了文章 • 0 个评论 • 38 次浏览 • 2021-03-16 16:52 • 来自相关话题

前言:在做网页和UI设计中合理使用一些法则,可以让我们的设计变的更有理有据,今天文章将介绍一个很使用的设计理论:7±2法则,并如何把它运用到我们界面设计当中。1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。 ...查看全部 >>

前言:在做网页和UI设计中合理使用一些法则,可以让我们的设计变的更有理有据,今天文章将介绍一个很使用的设计理论:7±2法则,并如何把它运用到我们界面设计当中。

1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。

运用7±2法则在网页和UI设计中

因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛,例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式,还有银行卡号、身份证号,我们总是喜欢把一长串数字拆分开来读写,目的就是降低记忆成本,提高信息的易读性,从而达到视觉防错的作用。

运用7±2法则在网页和UI设计中

Web导航栏选项卡数量不超过9个

在设计网页导航时,如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在7个左右(不超过9个),如苹果、Dribbble、behance等网站的导航分类。

运用7±2法则在网页和UI设计中

Web导航栏选项卡数量过多时

如果导航或选项卡内容很多,可以用一个树状层级结构来展示各级别关系,但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble,把更多子类别收在二级目录里。

运用7±2法则在网页和UI设计中

移动端选项卡导航

在移动端应用设计中,常见的电商app例如奈雪和乐凯撒分类模块,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻单品的效率。

运用7±2法则在网页和UI设计中

Tabbar区标签最多不超过5个

在移动应用设计中,底部Tabbar最少3个,最多为5个(几乎没几个超过5个),这样做除了减轻用户记忆负担,超过5个会降低视觉和操作上的体验。事实上就算只有4个,我们也经常想不起微信底部的4个Tab分别是啥。

运用7±2法则在网页和UI设计中

顶部导航栏页签

我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则,虽然在横轴可无限滑动,

但在显示区域只保持7±2法则的显示数量,例如马蜂窝、飞猪旅行等。

运用7±2法则在网页和UI设计中

金刚区图标不超过8个

我们常说的“八大金刚”就是一屏显示8个图标,超过的则放在第二屏。如果两行10个,往往第十个是“更多”入口,总的来说也没超过9个。

运用7±2法则在网页和UI设计中

banner文案不超过9个字

产品运营banner文案字数通常控制在9个字以内,在设计时也通常把长标题一分为二排两行,便于用户快速阅读,提升点击率。

运用7±2法则在网页和UI设计中

在交互设计中,7±2法则是减少用户认知负荷,提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性,避免在不断为产品添加功能时,破坏原有的视觉基础。

找不到配色灵感?这个网站给你100种选择!

网页设计 ncbk 发表了文章 • 0 个评论 • 23 次浏览 • 2021-03-16 13:58 • 来自相关话题

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:本文要介绍的「Tailwind.ink」是一个很有趣的色彩工具,以 AI 人工智能产生调色盘,依照说明,这个工具利用 Tailwindcss(CSS 框架)训练程序学习,当用户开启网 ...查看全部 >>

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:

本文要介绍的「Tailwind.ink」是一个很有趣的色彩工具,以 AI 人工智能产生调色盘,依照说明,这个工具利用 Tailwindcss(CSS 框架)训练程序学习,当用户开启网站、选择特定色调,Tailwind.ink 就会依照该色码产生 100 种相关色,像是偏向特定颜色或是加入深浅的渐变色,全部列在网页中就能轻松找到更合适的色码。

找不到配色灵感?这个网站给你100种选择!

Tailwind.ink 也是一项开源项目,如果需要可下载源码,依照说明调整为更符合自己需求的色彩产生器。

对于在选色时可能会遇到「颜色再深一些」或「偏向黄绿一些」这类情境,Tailwind.ink 能让使用者在配色时有更多更为弹性的组合方式,如果你透过色彩工具依然找不到适合的颜色,总是会有一点点差异,可以试试看以类神经网络训练出来的配色服务,可能更容易击中你的需求。

Tailwind.ink

网站链接:https://tailwind.ink/

使用教学

开启 Tailwind.ink 预设会是蓝色为主要颜色,右侧会显示依照该颜色预测出来的调色盘。

找不到配色灵感?这个网站给你100种选择!

在左上角的调色工具选择你想使用的主颜色后右侧色彩会实时更新,每个颜色名称下方会有对应的十种深浅变化,当然你也可以直接输入特定色码,套用你输入的色码来看看 Tailwind.ink 会产生哪些颜色。

找不到配色灵感?这个网站给你100种选择!

蛮有趣的是这些颜色组合都呈现一定规则的变化,无论是从浅到深、或是不同的色系,都能在单一页面进行预览或是比较,点选左上角的「Aa」可以在色块上显示文字,检查该背景显示深浅文字是否有良好的可阅读性和辨识性。

找不到配色灵感?这个网站给你100种选择!

值得一试的三个理由:

  • 使用 AI 类神经网络、依照主颜色产生 100 种相关颜色

  • 依照深浅和不同色调直接在网页上预览比较

  • 产生 HEX 色码可复制后取用颜色


网页设计制作教程

网页设计制作教程 网页设计 ncbk 发表了文章 • 0 个评论 • 18 次浏览 • 2021-03-15 11:23 • 来自相关话题

网页设计

网页设计 ncbk 发表了文章 • 0 个评论 • 16 次浏览 • 2021-03-15 11:05 • 来自相关话题