iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Modern Web

0~1 的 Design System 之旅系列 第 16

第十六篇-就從雜亂無章的 UI 開始-收集

  • 分享至 

  • xImage
  •  

種子期:

公司的產品都是以 table/tr/td 排版,因應客戶開始要求版面的設計,才漸漸轉型引入 UI 設計,但是引入 UI 設計概念初期,公司的 PM 及工程師們都沒有這方面的知識點,還記得有 PM 偷偷問我:呃~什麼是 UI ?那是做什麼的?(QQ)也有工程師大大對 UI 設計嗤之以鼻,認為我們在找麻煩,增加他們的工作量。唉~回想起來,還真佩服當初的自己,到底是怎麼熬過來的?幸好有一批好伙伴願意跟我一起努力,可惜,他們都離職往更好的方向發展了。(離得好XDD)

由於初期的混亂,公司的 UI 你做你的,我做我的,誰都想要跟人家有所不同,形成了同一個 UI 元件,在不同系統中都長得不一樣,完全沒有一致性。(我們人微言輕,PM 大大說了算 QQ)
https://ithelp.ithome.com.tw/upload/images/20240925/20113256Aj6mEbsF0l.png

收集期:

經過了春秋戰國時代的洗禮,是該好好整併一下了,本篇先把公司產品的 UI 元件收集起來,再好好進行整併/分類。

共用元件:針對公司現有頁面找出共用的元件,也可以看到有多少種設計

  • input/ Select:有三種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256ovdS9obOg8.png

  • Modal:有三種設計
    https://ithelp.ithome.com.tw/upload/images/20241011/20113256TqX1gAV6TG.png

  • Popup:有二種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256Q0fp1HzNz3.png

  • button:有四種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256H6hCrTKaA0.png

  • Breadcrumb:有三種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/201132565SM3Uc1u4C.png

  • Menu Tree:有五種設計(因為公司的資料不能外洩,所以馬賽克處理。)
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256djIGU1mJAD.png

  • Tabs:有三種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/201132562LJE2fwazy.png

  • Pagination:有三種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256LDTK2788u9.png

  • Table:有四種設計
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256qB2iavEFnn.png

特殊元件:在不同產品中還是會有特殊需求,把曾經設計過的特殊元件收集在一起

  • header 下拉選單
    https://ithelp.ithome.com.tw/upload/images/20240925/201132563DADErSGft.png

  • 日期時間+捲軸
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256WKAyvucC1L.png

  • 個人履曆
    https://ithelp.ithome.com.tw/upload/images/20240925/20113256i41xrPXWQB.png

經過收集,才發現原來公司的 UI 元件真的是五花八門,百花齊放。(時代的眼淚啊!)今天大致上把共用元件、特殊元件收集了一遍,應該有一些漏網之魚,待抓到的時候再加入搜集中,明天就要進入整併、分類的階段了,加油。


上一篇
第十五篇-站在巨人的肩膀-Bootstrap UI 解析
下一篇
第十七篇-就從雜亂無章的 UI 開始-分類
系列文
0~1 的 Design System 之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
viviana_fu
iT邦新手 5 級 ‧ 2024-11-01 16:23:20

離得好XDD
讓我瞬間爆笑

peggylai iT邦新手 5 級 ‧ 2024-11-04 10:20:22 檢舉

哈哈,妳懂得/images/emoticon/emoticon37.gif

我要留言

立即登入留言