“基于组件的设计方法” 介绍

   <p style="text-align:center"><img src="https://simg.open-open.com/show/447b844a6d79487c70e77b016e4d290f.png"></p>    <p>“基于组件的设计方法”(Component Based Design) 的概念大多会在比较庞大且复杂的项目中被提到。其实它也可以应用在规模比较小的项目和团队中，不论项目大小,组件化的设计方法都是行之有效的。 </p>    <p>首先,致敬Brad Frost,他曾写过一本关于Atomic Design（网页的原子设计模式）的书。在书中,他传递了一个理念: 不管是设计网页还是app页面,实际上我们都是在创造一个设计系统。 </p>    <p>然而, Atomic Design这种对自然的隐喻会使客户困惑。特别是抽象的命名也会让人望而却步。因此在吸取其他优秀设计师的想法的基础上，我们定义了“基于组件的设计方法”。</p>    <p>基于组件的设计方法（Component Based Design）是什么? </p>    <p>本质上来说,“基于组件的设计方法”是 将用户界面（UI）分解成一些命名清晰且更小,更容易管理的模块 。这些模块分为以下6个部分：</p>    <p>1.  一致性(Identity)</p>    <p>2.  元素(Elements) </p>    <p>3.  组件(Components) </p>    <p>4.  构成(Compositions) </p>    <p>5.  布局(Layout) </p>    <p>6.  页面(Pages) </p>    <p>一致性(Identity) </p>    <p>6大部分中的首要的是一致性（Identity）。在这一层级中我们定义一个项目的核心品牌元素。 字体和排版、主色和辅助色 在这里都会被详细规定好。定义之后,这些规则将会在整个项目中贯穿执行。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f7b40e93ad872da8cddc281256e4f537.png"></p>    <h3>元素(Elements) </h3>    <p>第二个部分规定了项目中重复使用的最小层级：元素。一些大家熟知元素有: 按钮、链接、输入框、下拉框等等。它们的样式,包括各种状态都是需要被定义好的,比如按钮悬停、获得焦点、禁用的状态。 这里准则是: “ 一旦定义了（这些元素）,就要在整个项目中循环重复使用它们。 ” </p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/48566e933b8b1b564eee9efd42a8c9e6.png"></p>    <h3>组件(Components) </h3>    <p>工作中主到次，第三个部分是组件（Components），当我们设计app或者web的时候,在页面上最多的就是组件，一个组件至少需要几个元素构成。譬如像卡片、导航栏都是一些常见的组件，不过组件并不一定非要模块化。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1e295b47cd23c845ac09da1d41f6ce8d.jpg"></p>    <p>当我们设计组件的时候,根据项目存在的不同的响应式尺寸,一开始就给出相对应的版本设计。通过使用这种方式,我们不需要为了确保它能在在智能手机正确显示而回溯查看好几周前所设计的页面。响应式的目标需要事先经过客户的同意,随后才能开始组件设计。</p>    <h3>构成(Compositions) </h3>    <p>再放大一点，第四部分是构成（Compositions），它是由许多不同的组件组成的。它们定义了内部组件的运作方式。</p>    <p>下图是一个简单的单列布局。它只是定义了一些组件之间的空白处理,标题和内部的组件是如何被循环使用的。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1f1bad36e2e8cdfb3d9f0179d4867a2e.jpg"></p>    <h3>布局(Layout) </h3>    <p>第五个部分是布局（Layout）,这是一系列比较抽象的设计原则。下图定义了一些空白、栅格和构成组件的元素数量。通过定义像这样的规范,可以帮助其他设计师快速地进入一个项目,并且可以直接使用已有的样式和设计规范。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b79f4993c814d706cb99dc8846d4ed28.png"></p>    <h3>页面(Pages) </h3>    <p>最后一个部分是项目中的实际页面。每一个页面包含了各种组件和构成的排列组合。</p>    <p>需要注意的是，所有的特例都是在页面层级被定义的。比如市场部门提出说联系人页面的背景需要是蓝色的,这时候我们就只在联系人页面执行这个需求。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/45cb4fe4a4a882e37aa9524faa0e3b66.jpg"></p>    <p>一个简单的“基于组件的设计方法”的例子：</p>    <p>假设我们要给一些活动售卖3种不同的门票。每一张门票的表现的形式需要相同,它只包含了数量有限的元素,即一个按钮和几段文本内容。这就意味着一张门票即为一个组件:门票组件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2fb39082957ec9635daa8415f09fc03c.png"></p>    <p>现在,我们需要在首页以一个简单的三列布局来展示这3张门票的属性。这就需要我们来设计门票构成规范。这个构成规范了各个门票组件的间距,以及一个标题。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/117bf7a2649c041b3de0bbfce9289682.png"></p>    <p>项目上线后两天,客户要求添加已售罄的状态在门票上。这意味着我们仅仅只需要更新门票组件然后就可以发给开发。非常方便！</p>    <h3>设计软件：Sketch</h3>    <p>毫无疑问地,Sketch已经快速地成为了APP和UX设计首选应用。Sketch提供一些文字样式,元件和画板让我们能更加快速地调整我们的组件化设计的工作流。我们已经设计了一套成熟的Sketch模版,它涵盖了所有这些原则在里面。所以我们可以快速地开始一个项目。花更少的时间来定义所有你所需要的文字样式可以省下很多时间。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3ec8b7c9aaac987c1250a59e3f5f0bb4.jpg"></p>    <h3>结束语 </h3>    <p>简而言之, “基于组件的设计方法”(Component Based Design)可以让我们快速地设计一些页面,从而可以更加容易地来维护和更新一些特性。 因为一切都已经被清楚地定义好了,所以即使是不同的设计师参与同一个项目也可以保持项目的一致性。 </p>    <p>如果喜欢我们的文章，欢迎分享給你的朋友，同時也別忘了关注我们，我们将持续为你分享设计相关的文章，有任何建议，转载或投稿欢迎來信: zovy123@qq.com :blush:</p>    <p> </p>    <p>来自：http://mp.weixin.qq.com/s/Il_x6eCTbK-EyxyzX9K7tQ</p>    <p> </p>