1. <th id="fdehc"></th>
      1. <rp id="fdehc"><ruby id="fdehc"><input id="fdehc"></input></ruby></rp> <th id="fdehc"></th>

        <dd id="fdehc"></dd>
        <dd id="fdehc"><pre id="fdehc"></pre></dd>

        1. Alice

          @元堯:當下很多常見的、優秀的組件庫,都為設計和開發的工作提供了便利。那么使用組件庫可以替代設計師么?組件和設計師之間的關系又是什么呢?本文源于讀者和粉絲的相關提問,以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉淀和總結,希望對你有幫助。

          相關閱讀《B 端產品組件設計細節及經驗分享(四)

          相關閱讀《B 端產品組件設計細節及經驗分享(五)

           

          1、樹形選框和穿梭框的區別?

          有同學問我:樹形選框和穿梭框有什么區別?

          其實這兩種組件方案都可以解決?“處理多種選項”?的問題,兩者的不同點如下:

           

          樹形選框

          單一列表的樹形選框,其特點為:

          1. 通常適用于選項少的場景,不需要頻繁上下滾動鼠標查看,選擇后的選項結果一目了然。

          2. 在頁面中占的空間小,也可以放置在下拉菜單中使用。

          3. 一般更強調關聯性層級性。比如權限與角色之間的關聯;角色與角色之間的上下級關系和權限包含關系。

           

          穿梭框

          雙列列表的穿梭框,其特點為:

          1. 用直觀的方式在兩欄中移動元素,完成選擇行為。一列為源列表,一列最終被構建的項目列表,用戶可以看到兩個列表中的項目并進行操作,“數源”?和 “結果”?清晰可見。

          2. 占用更多空間,可以展示選項的更多信息,也可以包含更多結構,但左右兩列的選項結構須保持一致。

          3. 一般強調權限是用于?“給予”?而不是 “復制”?,比如可以用于描述:一個權限從 A 手中轉到 B 手中,B 擁有權限的同時,A 不再具備權限。

           

          大家可以對應業務場景,選擇更適合的組件。

           

          2、按鈕的狀態設計

          有同學對我說,他看到有的平臺按鈕的狀態分為鼠標 “懸?!?、“點擊” 和?“按下”?三個樣式;有的平臺的按鈕 “點擊”?和 “按下” 的狀態一致。所以按鈕的狀態是根據什么來做定義的呢?是不是越全面越好呢?

           

          1. 按鈕狀態的設計理念

          其實關于按鈕的狀態分類,在能夠給用戶基本操作反饋的前提下,并沒有絕對的好壞之分。平臺之間出現這些差別的原因是由設計系統的設計理念風格來決定。

          舉個例子,下圖是一個比較夸張的案例:某個組件系統的設計理念是【盡可能模仿真實世界中的交互狀態】,圖中按鈕模仿的就是真實世界中的物理按鈕反饋狀態,但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念,所以更多是通過改變或增加顏色、動效、投影等,對按鈕進行“高度”的體現。

          圖片

          對于真實世界的按鈕,有一些關鍵的大按鈕,在按下去之后會有一種?“咔嗒” 的碰觸感,意在告訴用戶你已經成功按下了按鈕,這對應到二維世界,就是圖中按鈕的“點擊“的效果。

          而物理世界的按鈕在按完之后雖然會彈回到原位,但很有可能是慢慢恢復到原位,也很有可能是不會回到 100% 的原位,比原位稍微矮一些,所以圖中點擊后的狀態相比于默認狀態就缺少了按鈕下邊緣的厚度感,或者是顏色變得更淺 / 更深,以此來體現差異。

          以上所說的組件設計風格,是一種擬真的設計風格。也有一些公司的設計語言,可能是扁平化,追求極簡主義,所以會省略這當中的過程,只傳達給用戶最干脆、直接的反饋。

          因此組件的狀態效果,在能夠給用戶明確基本操作反饋的前提下,并不是 “對錯” 或?“好壞”?的問題,而是由根據產品定位、功能特性和產品用戶的行為偏好等因素來定的設計理念所決定的。

           

          2. 組件狀態是不是越全面越好?

          這個問題最重要的判斷標準是:業務 /?產品是否需要。在業務組件庫搭建的初期,一定是以業務為主,“從業務中來,到業務中去”?。當你的業務中對于同一個組件有大、中、小的尺寸需求時,你再做規定也并不晚。這樣的好處是:

          • 做好的尺寸規定直接運用到業務中,有現成的檢驗場景;
          • 不至于白費功夫,做了一大堆的尺寸分類和說明但無處應用;
          • 盡可能減少設計師在查找和使用組件時的多種選項干擾。

          另外要注意,如果做了多種尺寸,你需要詳細的規范每一種尺寸可以使用的場景和注意事項,避免誤用和混用。

          很多時候并不是內容越全越好?!叭?但不好用,也會帶來新的問題。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網 » 工作經驗| B 端產品組件設計細節及經驗分享(六)

          登錄收藏
           
          你可能喜歡的:
          微醫APP 3.0 | 健康有道微醫APP 3.0 | 健康有道
          作為設計師,這幾個APP你居然不知道作為設計師,這幾個APP你居然不知道
          百度健康服務化體驗百度健康服務化體驗
          情緒版還能這樣做?難怪大廠的設計師那么強情緒版還能這樣做?難怪大廠的設計師那么強
          騰訊設計云發布設計體系了!這次真齊全!騰訊設計云發布設計體系了!這次真齊全!
          設計師要掌握的UI設計技巧(一):標題篇設計師要掌握的UI設計技巧(一):標題篇
          工作經驗|設計資產庫中的組件,應該如何命名?工作經驗|設計資產庫中的組件,應該如何命名?
          藍湖產品經理:產品設計協作的前世今生藍湖產品經理:產品設計協作的前世今生
          設計入門必備萬金油-場景篇設計入門必備萬金油-場景篇
          對話設計圓桌會-B站(年輕化設計)對話設計圓桌會-B站(年輕化設計)
          ?
          性xxxx18学生和老师
          1. <th id="fdehc"></th>
            1. <rp id="fdehc"><ruby id="fdehc"><input id="fdehc"></input></ruby></rp> <th id="fdehc"></th>

              <dd id="fdehc"></dd>
              <dd id="fdehc"><pre id="fdehc"></pre></dd>