当前位置:首页 > 网站建设 > 正文内容

h5响应式网站模板源码(h5响应式网站什么意思)

网站建设1年前 (2023-10-17)585

基于组件的设计往往在大型复杂的设计项目中会被提到,但在这篇文章里,作者提供了许多实用的建议,让基于组件的设计在小型项目和团队中也可以发挥作用。

首先我们要向关于原子设计理念的作者,Brad Frost 先生致敬。是他向我们引入了这样的设计理念:当我们以为我们是在设计网页或是应用界面时,我们其实是在是设计设计系统。

但我们发现原子设计的某些理念会引起用户的迷惑,所以在借鉴学多其他优秀设计的基础上,我们总结出了一套基于组件设计的方法。

基于组件设计是什么?

基于元素设计的核心就是把 UI 分割成更小,更易操作的小部分,每个部分都有明确的名字。这些小部分可以分为以下六类。

1. 身份

六个分类的第一个部分就是身份。身份是指整个项目的元素要保持高度一致性,从而形成一个项目的整体身份认同。我们需要在这里定义整个项目的核心元素。界面、字体、一级和二级色彩都需要在这时候仔细地被定义。之后这些元素会贯穿在整个项目之中。

2. 元素

第二个部分包含了项目中可重复利用的最小部分,元素。一些众所周知的元素包括按钮,链接,输入框,下拉菜单等。所有这些都需要和它们所有的状态一起被定义好。这些状态包括悬停,聚焦和未激活。我们的口号是:一次性定义好,然后贯穿整个项目始终。

3. 组件

展开全文

接下里的一个部分就是组件。在做应用设计或是网页设计的时候,出现频率最高的就是组件了。组件是至少运用了一组元素的任何形式的设计。卡片,导航栏等都是经典的组件设计样式。不过他们也不一定需要从形式上看起来像一个模块。

对于每个设计组件,我们会对它提前做好响应式尺寸,从而适应不同屏幕尺寸大小。这样我们在设计的时候就不用返回去为了适配不同尺寸大小而重新修改设计。我们会提前跟客户沟通好目标响应式组件,然后再依据情况设计各个组件。

4. 组合

现在我们来到了规模更大一点的分组,也就是组合。组合是一个包含了多个组件的部分。它们定义了包含的组件应该如何呈现。

下图是一个简单的分栏布局。也是一个非常简单的组合。它只是定义了一些边缘的留白,上方的一个小标题和每个组件如何摆放形成逻辑。

5.布局

第五个分组,布局则是设计原则里面更加抽象的组合。这时候留白的数量,栅格和换行都做好了定义。当你像这样定义好了一个设计的时候,其他设计师就很容易用现有的设计风格和指导来进入一个项目。

6. 页面

最后的分组就是项目实际的页面(也可能是屏幕)。每个页面都是一些列组合和组件的排列。

样例

下面我们来看一个非常简单的基于组件设计的样例。

假设我们在某个活动的门票设计。有三种门票,每种门票都以同样的方式设计,只包含有限的元素——在这个例子里,只用按钮和一些文字。这也就意味着这个门票应该被看作一个组件(只包含元素)。

假设现在我们想在我们的主页上用一个三栏布局来拜访这些门票这时候我们就需要定义组合了。也就是「门票组合 」。这个组合明确了每个组件之间所留出的空间,以及上方的一个标题。

项目发出两天后,客户表示需要在门票上面加一些文字,表示已售罄。这也就意味着我们只需要更新「门票组合 」然后发给开发者就行了。快捷多了!

Sketch

大家都知道 Sketch 已经迅速成为 UX 和 UI 设计的新宠。巧妙运用 Sketch 里面的文字样式,符号以及 Artboard,可以极大地帮助我们润色基于组件的设计。我们设计了一个很棒的 Sketch 模板,内置了以上所有的设计原则。这样我们就可以随时快速开始一个项目了。

花一点时间在定义你所有的文字样式上,可以在长远为你省下大量的时间。

总结

总之,基于组件的设计让我们能快速设计出能够方便更新和维护的许多页面。由于所有的部分都已经清晰定义好,多个设计师可以方便地在一个项目里协作。

感谢阅读,希望对你们有帮助。

以上内容来自知乎专栏盒子以外,仅供学习交流

h5响应式网站模板源码(h5响应式网站什么意思)

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/61473.html

分享给朋友:

“h5响应式网站模板源码(h5响应式网站什么意思)” 的相关文章

永康网站优化(永康百度网站优化品牌)

永康网站优化(永康百度网站优化品牌)

本篇文章给大家谈谈永康网站优化,以及永康百度网站优化品牌对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、这个http://www.11door.com/即将改版,改版对这个站的优化有影响嘛? 2、如何优化论坛这类网站 3、急求~! 永康的朋友帮帮忙吧 浙江永康的...

成都网站制作(成都网站制作公司哪家好)

成都网站制作(成都网站制作公司哪家好)

本篇文章给大家谈谈成都网站制作,以及成都网站制作公司哪家好对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、成都网站建设多少钱? 2、成都网站建设公司哪家好些 3、成都网站建设:企业制作网站需要做哪些准备 4、成都网站制作多少钱? 5、我们是成都一家小公司,...

3g网站制作(3g门户网站是多少)

3g网站制作(3g门户网站是多少)

本篇文章给大家谈谈3g网站制作,以及3g门户网站是多少对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、3g网站中 制作主题的时候 我想把所有图标也改成卡通的 怎么做啊 谢谢 2、网站怎么建设,需要钱吗? 3、手机wap网站建设价格多少? 4、如何进行网络推广...

如何创建外卖平台(如何创建一个外卖平台)

如何创建外卖平台(如何创建一个外卖平台)

本篇文章给大家谈谈如何创建外卖平台,以及如何创建一个外卖平台对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、想自己建立一个外卖平台,应该做哪些准备? 2、微信外卖平台怎么建立 你都学会了吗 3、怎么注册一个外卖平台 4、如何创建自己的外卖平台,把附近的商家商品...

word文档怎么排版段落空格(word文档怎么弄段落空两格)

word文档怎么排版段落空格(word文档怎么弄段落空两格)

今天给各位分享word文档怎么排版段落空格的知识,其中也会对word文档怎么弄段落空两格进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、Word文档中,如何快速删去段落与段落之间的空格行 2、如何给word文档全文段首添加空格? 3、如何在word中...

电脑家教一对一高中版软件免费下载(电脑家教1对1下载)

电脑家教一对一高中版软件免费下载(电脑家教1对1下载)

本篇文章给大家谈谈电脑家教一对一高中版软件免费下载,以及电脑家教1对1下载对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、电脑家教1对1初中版2980元怎么样 2、高中一对一家教在哪里? 3、思学通电脑家教1对1到底好不好,多少钱? 到底有没有用? 电脑家教1对...