設計中如何打造最合適的組件?

在看組件和元素之前,我們先了解在他們之上的一個概念-???/strong>

??櫬蠹矣Ω枚疾荒吧?,任何一個完整的界面,都會有多個功能???,而每個??檳謨邢嚶Φ淖榧?,每個組件中又有相應的元素,其中任何一點的變化,都會使用戶對產品的認知發生改變。

??椴⒉皇且桓魴碌母拍?,早在20世紀初期的建筑行業中,將建筑按照功能分成可以自由組合的建筑單元的概念就已經存在,同樣也出現在早期的產品設計中,并且許多產品的設計都能將其很好運用,包括汽車,電腦,電器,鞋子等等。(如下圖)

這些產品之所以使用??槭且蛭?榫哂姓廡┯諾悖?/p>

1.標準化:??槭薔哂斜曜汲嘰綰捅曜冀涌詰腦ぶ乒δ艿ピ?,這是組裝、互換等特征的基??;

2.可組裝:多個??榭梢苑獎?、靈活地組合、配置,以構造不同大小、不同形狀、不同功能的系統;

3.可替換:通過用一個??槿ジ渙硪桓瞿??,可以改變系統的局部功能而不影響系 統的其他部分;

4.可維護:可以對??榻芯植啃薷幕蟶柚?,以滿足用戶需求,另外可以增加新???,擴展系統功能。

 

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

常用插線板的??櫸治講糠鄭鶴蕓嗇?楹橢饕δ苣??,為保證總開關的重要性,總開關??橄虜⒚揮辛淖榧?,只有控制總操作的元素(按鈕),總指示燈以及品牌logo之類的品牌信息。

我們來看看總開關??橄碌腦兀?/p>

 

我們來看看主要功能??櫚淖榧馱兀?/p>

 

在功能??椴槐淶那榭魷?,人們即將開始了一輪新的嘗試和探索 ————————————————————-

 

產品的發展與創新 — 元素的變化和新組件的形成

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

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

 

當然,影響的因素還有??櫚耐廡?,材料變化(此處不深入討論)————————————————————–

 

從以上例子中可以發現:

1.在滿足用戶和產品需求的前提下,發現最合適的元素和組件能打造更好的產品;

2.元素和組件的變化,能提升產品功能的體驗,同時可能為產品帶來創新;

3.如果你想發現一個產品的元素和組件,最好的辦法就是將它“拆”了。

 

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

項目實例 — 米大師WEB改版

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

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

 

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

 

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

1.優化??櫚慕峁?/strong>

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

在新版中,我們采用上下結構,按照用戶路徑進行信息分區,優化視覺動線。

 

2.確立組件的表現形式

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

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

于操作,也能有效的對同類信息進行區分,同時能夠容納多種內容,便于多業務的復用。

 

這些工作完成后,接下來就開始搞事情了——發現最合適的組件

第一步:拆解,??檳諉扛鱟榧锏哪諶薟煌?,將組件拆解成多個區域,發現每個區域的主要元素。

拆解總類目???/p>

 

拆解商品檔位信息???/p>

 

拆解支付信息??椋ㄒ訯幣渠道為例)

 

 

第二步:結合新的??榻峁購托碌淖榧?,改善已“拆解”的元素,發現新組件,定義新組件內的元素。

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

 

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

 

第四步:重組 ,將區域內整理出來的主要元素“重組”,進行嘗試,發現多種組件形式,示例如下:

重組過程中,你會發現,你見過的,沒見過的所有式樣都在里面。

 

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

來看看最后的方案呈現:

 

隨便聊聊

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

所以,趕快去發現新玩意吧~

來源:UI中國

上一篇: 說說UI設計的工資真的那么高嗎?

下一篇: 路在何方?一名網頁設計師的職業化思考

分享到: 更多
时时彩计划 北京pk拾赛车人工计划 广州福利彩票投注站 现金龙虎平台 双色球历史开奖 多赢在线下载 北京塞车全天计划精准版 幸运飞艇技巧规律 单机斗地主 大乐透近30期走势图 抢21游戏规则 内蒙古时时计划软件手机版 代投注赚佣金 新疆时时高频计划 福彩3d单选投注技巧 重庆时时龙虎合开奖app