創(chuàng)新互聯(lián)編者，為你提供《設計中怎樣打造最合適的組件》。在看組件和元素之前，我們先了解在他們之上的一個概念-模塊。模塊大家應該都不陌生，任何一個完整的界面，都會有多個功能模塊，而每個模塊內有相應的組件，每個組件中又有相應的元素，其中任何一點的變化，都會使用戶對產品的認知發(fā)生改變。

模塊并不是一個新的概念，早在20世紀初期的建筑行業(yè)中，將建筑按照功能分成可以自由組合的建筑單元的概念就已經存在，同樣也出現(xiàn)在早期的產品設計中，并且許多產品的設計都能將其很好運用，包括汽車，電腦，電器，鞋子等等。(如下圖)

這些產品之所以使用模塊是因為模塊具有這些優(yōu)點：

1.標準化：模塊是具有標準尺寸和標準接口的預制功能單元，這是組裝、互換等特征的基礎;

2.可組裝：多個模塊可以方便、靈活地組合、配置，以構造不同大小、不同形狀、不同功能的系統(tǒng);

3.可替換：通過用一個模塊去更換另一個模塊，可以改變系統(tǒng)的局部功能而不影響系 統(tǒng)的其他部分;

4.可維護：可以對模塊進行局部修改或設置，以滿足用戶需求，另外可以增加新模塊，擴展系統(tǒng)功能。

那我們從身邊熟悉的產品(插線板)出發(fā)，看看它里面有什么?

常用插線板的模塊分為兩部分：總開關模塊和主要功能模塊，為保證總開關的重要性，總開關模塊下并沒有連續(xù)的組件，只有控制總操作的元素(按鈕)，總指示燈以及品牌logo之類的品牌信息。

我們來看看總開關模塊下的元素：

我們來看看主要功能模塊的組件和元素：

在功能模塊不變的情況下，人們即將開始了一輪新的嘗試和探索 ————————————————————-

產品的發(fā)展與創(chuàng)新 — 元素的變化和新組件的形成

注意：必須要先弄清楚你的目標用戶是誰，什么樣的元素，新組件，外形，材料能吸引你的目標用戶并能最好的表現(xiàn)其功能，這些在用戶體驗的過程中會起決定性的作用。

在技術條件可行的前提下，人們增加，刪除或改善元素，創(chuàng)造出了很多更好用的組件。同時也產生了很多新的品牌以及創(chuàng)新點。(插孔，接口等其余元素的視覺表現(xiàn)方式也變得更多樣化)

當然，影響的因素還有模塊的外形，材料變化(此處不深入討論)————————————————————–

從以上例子中可以發(fā)現(xiàn)：

1. 在滿足用戶和產品需求的前提下，發(fā)現(xiàn)最合適的元素和組件能打造更好的產品;
2. 元素和組件的變化，能提升產品功能的體驗，同時可能為產品帶來創(chuàng)新;
3. 如果你想發(fā)現(xiàn)一個產品的元素和組件，最好的辦法就是將它“拆”了。

那么在設計中，如何選擇設計元素打造最合適的組件?

項目實例 — 米大師WEB改版

先了解下米大師WEB是什么?

米大師WEB是計費平臺部為公司以及合作方提供的，PC端泛娛樂業(yè)務計費解決方案。業(yè)務以JS的方式直接調用，并以WEB彈窗形式來適配所有業(yè)務。

我們來看看老版本，它有什么問題?(以會員為例)

要解決這些問題，打造最合適的組件，先需要做的是：

1.優(yōu)化模塊的結構

舊版本采用的是左右結構，商品信息和支付信息混雜在一起，視覺動線雜亂，影響用戶處理效率。

在新版中，我們采用 上下結構 ， 按照用戶路徑進行信息分區(qū) ，優(yōu)化視覺動線。

2.確立組件的表現(xiàn)形式

舊版本商品和支付信息采用的是列表式，信息排列雜亂緊湊，視覺不美觀，且不好適用于多種業(yè)務。

在新版中，我們采用 卡片式，將商品信息分檔位，并將其單個打包 ，給用戶帶來更好的視覺一致性，易

于操作，也能有效的對同類信息進行區(qū)分，同時能夠容納多種內容，便于多業(yè)務的復用。

這些工作完成后，接下來就開始搞事情了——發(fā)現(xiàn)最合適的組件

第一步：拆解 ，模塊內每個組件傳達的內容不同，將組件拆解成多個區(qū)域，發(fā)現(xiàn)每個區(qū)域的主要元素。

拆解總類目模塊

拆解商品檔位信息模塊

拆解支付信息模塊(以Q幣渠道為例)

第二步： 結合新的模塊結構和新的組件， 改善已“拆解”的元素，發(fā)現(xiàn)新組件 ，定義新組件內的元素。

注意：緊隨這個步驟之后，必須要先確定組件內設計元素的優(yōu)先級，否則無法對結果進行判斷。此處商品卡片內信息優(yōu)先級為：運營信息>主要價格>商品檔位>輔助信息

第三步：分析羅列 ，通過參考和梳理，整理出組件內主要元素所有的表現(xiàn)方式，并將其一一羅列。(此處開始以單商品卡片組件為例)

第四步：重組 ，將區(qū)域內整理出來的主要元素“重組”，進行嘗試，發(fā)現(xiàn)多種組件形式，示例如下：

重組過程中，你會發(fā)現(xiàn)，你見過的，沒見過的所有式樣都在里面。

第五步：判斷 ，根據(jù)判斷標準(設計原則及產品屬性)對各組件形式進行分析，選擇最合適的，如下：

來看看最后的方案呈現(xiàn)：

最后

設計的方法有很多種，或許未來會有更好的方法出現(xiàn)，但希望我們在通過各種渠道(網絡、書本、項目等等)積累經驗和知識的同時，抽點空閑，去看看身邊普通或者不普通的物品，你會發(fā)現(xiàn)在它們身上有很多好的玩意等待著被發(fā)現(xiàn)，而這些東西也會為你的工作和生活帶來很大的幫助。

新聞名稱：設計中怎樣打造最合適的組件
本文地址：http://chinadenli.net/news13/159213.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、電子商務、服務器托管、微信公眾號、企業(yè)網站制作、網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)