UI基礎知識——泛日曆組件製作思路記錄

UI基礎知識——泛日曆組件製作思路記錄

來自專欄超人的電話亭25 人贊了文章

本篇分享是「組件分享」系列之一，通過對主流 APP 組件的設計進行整理分析，幫助其它學員和新人可以更好的掌握 APP 設計的基礎知識。該系列文章和設計基本由不同學員獨立完成（我只負責喊加油和給方向）

本篇作者是：五期——Young同學。

往期預覽：

酸梅干超人：UI基礎知識——動態卡片設計思路?

zhuanlan.zhihu.com酸梅干超人：UI基礎知識——快速功能入口?

zhuanlan.zhihu.com酸梅干超人：UI 基礎知識——分頁器工具欄設計思路?

zhuanlan.zhihu.com酸梅干超人：獨家素材整理——UI設計師的組件庫 V0.1?

zhuanlan.zhihu.com

以下是正文部分：

泛日曆組件實際上包括 calendar (日曆組件) 以及 date picker (日期選擇器) 兩種，因為它倆長得實在接近，設計上僅有些微不同，所以這裡將兩者整合起來，統稱為"泛日曆組件"。同時需要注意的是，它們雖然長得差不多，但不論是在使用場景上還是交互操作上都有相當大的區別 (這個後面會詳細說到) ，所以儘管此處將兩者整合，作為設計師依然需要明確區分兩者功能，不能混為一談。

下圖給出了一些泛日曆組件的樣式，以落地產品居多，也包含了一些飛機稿的樣式：

一、calendar 與 date picker 的區別

calendar 與 date picker 之間的界限依然非常清晰，雖然形式上大同小異，但是功能上屬於完全不同的兩個組件，它們的差異主要有以下幾點：

• 使用場景

calendar 與 date picker 的使用場景實際上完全不同。

calendar 組件最多使用在純粹的日曆應用中，且只會出現在首頁，例如所有品牌的手機中都會預置的應用 "日曆" 。calendar 主要的功能在於展示所有關於日期的東西，包括以月份形式展現的日期、日程、節日、所標記的重要的日子 (如生日)、農曆&節氣等等，它將所有圍繞"日期"這一對象的信息全部聚合起來，集成到這樣一個以組件為主題的應用中，以期完全替代實體日曆所扮演的一切角色。

而 date picker 則著重在 picker 上，日期選擇器通常用在需要精確定位到某一天或者某幾天的時候，強調對日期的選擇而非信息聚合。所以 date picker 的常用應用類型包括但不局限於：日記類、todo類、倒數日類、預定類、記賬類等等。

下面這張圖分類展示了日曆組件和日期選擇器，卡片右上角標識了應用類型：

• 組件形式

date picker 可以有類似對話框 (dialogs) 的以及類似菜單 (Menus) 的形式，但是 calendar 幾乎不可能出現這樣的形式，這是因為在應用的使用過程中， calendar 一般來說處於第一個步驟，而 date picker 一般來說是中間步驟。

下圖展示了 date picker 的組件形式，但這些形式幾乎不會用於 calendar 中。

• 設計細節

同樣是由於功能上的本質不同， calendar 在設計上與 date picker 也有細微程度上的差異，比如 calendar 作為信息聚合的載體，需要用不同的標記標示出不同的信息類型，這些信息類型包括但不限於：今天是哪一天/禮拜幾、是否有日程計劃、是否有提醒、是否是節假日等等，這些信息都需要在 calendar 組件中有所表示。

但是 date picker 不同，它只需要最基本的日期信息就夠了，其他一些是否需要則視具體 app 類型而定，比如：倒數日類應用可能會存在農曆生日的條目，所以可以考慮增加公/農曆切換的按鈕、todo 類應用則可能需要標記出哪一天存在todo條目等等。總而言之，date picker 通常沒有 calendar 那樣的信息密度，所以在具體執行設計的時候，calendar 需要考慮將不同的信息標誌做得易於區分和理解，而 date picker 只需要考慮本應用需要的信息該如何展示。

下圖展示了 calendar 以及 date picker 的設計細節的不同：

二、泛日曆組件的製作方法：

說了這麼多不同，但這哥倆依然是超級像，所以設計時候其實有很多相似的地方。所以接下來是一些通用的設計思路和方法。

由於日曆組件結構較為複雜，由好幾個核心部分組合而成，所以我決定將這幾個部分分開討論，以達到最明晰的論述效果。這幾個部分分別為：「今年今月」、「返回今日」、「月份切換」，「星期」、「日期列表」。之所以分這些部分而對不是個一整個完整的組件進行講解，是因為我希望大家可以根據需求靈活組合這幾個部分，而不是照搬照抄一整個組件。

1.「今年今月」的表現形式

在calendar組件中，通常會將「今年今月」單獨寫出來，有時還伴隨著菜單按鈕，除了提醒用戶今天是哪一年哪一月之外，有時還提供了月份切換的操作入口。

而在 date picker 中，只會展示年月日信息，以提醒用戶選擇了哪一天或者哪幾天。

• 格式

  如下圖5所示：

  1.xxxx年x月 (如: 2018年5月 / 2018年五月)；
  2.x月xxxx (如: 5月2018 / 五月2018)
  3.xxxx/x/x (年/月/日，如: 2018/5/6)；
  4.x月 (如: 五月 / 5月)；
  5.飛機稿中請自由發揮想像；

• 位置
  1.整個組件的左上方
  2.整個組件的上方居中；
  3.整個組件的右上方；

  4.飛機稿中請自由發揮想像；

• 尺寸
  具體組件設計中「今年今月」的尺寸都不太相同，下面用具體的實例來給出一些尺寸上的建議：
  實例一：
  所有文本同一大小的情況 (具體製作原型時我給了 12pt/14pt/17pt 三種字型大小)，以其中一個為例，實例一的詳細尺寸標註如圖7所示。
  1.這個區域一般來說處於整個組件的頭部區域，該區域高44pt；
  2.側邊欄icon、日曆icon、更多icon以及"2018年5月"垂直居中；
  3.如果有更多的icon可以添加在更多icon與日曆icon之間，大小一致，間距固定10pt；
  4.可展開的提示icon "^" 與頭部區域以及"2018年5月"水平居中，貼底；

實例二：

部分文本尺寸不相同，這種情況下需要注意的是哪怕字型大小不同的文本，其底部應當在視覺上對齊，具體如圖8所示。

1.通常放大月份文本，此例中為"5"；

2.所有文本內容底部視覺上對齊 (而不是文本框對齊)；

2.「返回今天」按鈕的表現形式

calendar 需要提供快速返回「今天」的 button；date picker 則比較少有這樣的需求。

• 形式

  1.純文本；

  2.icon；
  3.button；

• 位置
  1.組件左上方；
  2.組件右上方；

• 尺寸
  與其餘icon統一大小即可。
  實例三：
  實例三的尺寸標註圖示如圖10所示，需要注意以下幾個地方：

  1.今日 button、左右切換 icon 以及中間的"五月 2018"文本均垂直居中；

  2.左右切換 icon 與中間的文本應當距離相等；
  3.button 點擊後應當有操作反饋，例如顏色的變化。
  4.在某些組件的應用場中 (如本例為一個記賬應用的 date picker 組件原型)，當月份處於當前月時，右切換箭頭將處于禁用狀態，此時該箭頭顏色改為禁用的灰色。

3.「月份切換」的表現形式

• 形式

1.一個向下的菜單展開箭頭；

2.左右兩個切換箭頭 (通常也可以左右滑動切換)；

3.上下滑動；

• 位置
  「月份切換」的菜單展開箭頭通常就在「今年今月」右側5 ~ 10pt處，與「今年今月」組合成按鈕；而左右兩個切換箭頭通常就離「今年今月」比較遠，一般要靠近組件區域兩側的邊界。

• 尺寸
  實例四：
  1.左右切換 icon 與文本垂直居中；
  2.在 dialog 中，"2018年5月"可以適當的縮小一些 (至12pt) ；

實例五

1."2018年5月"、菜單展開 icon 、日曆 icon 以及更多 icon 均垂直居中；

2.如有更多需要添加的 icon ，可以放在日曆 icon 與更多 icon 之間，相鄰icon距離10pt；

3.菜單展開 icon 在文本右側，距離較小，此例為5pt；

4.菜單展開之後，箭頭方向改為朝上，意為「收起菜單」；

4.「星期」的表現形式

• 形式
  周一開始和周日開始這種內容上的分類就不細說了，我只說設計細節的部分。
  1.中文大寫數字 (例如：日、一、二、三、…)；
  2.周x (例如：周日、周一、周二、周三、…)；
  3.英文首字母 (例如：S、M、T、W、…)；
  4.英文前兩位 (例如：Su、Mo、Tu、We、…)；
  5.英文前三位 (例如：SUN、MON、TUE、WED、…)；

• 位置
  必然在日期列表的上方，而在一些全屏顯示的日曆類app中，星期列表可以吸頂。

• 尺寸
  在基於iphone設備的設計中，屏幕寬度375pt是不能被7整除的，所以為了每個單元格的寬度能夠取整，需要對單元格的寬度以及間距做一些數值上的調整，這樣一來就避免不了兩側有幾pt的留空，這在實例中會有相關的描述。
  實例六：
  1.與之後將描述的日期列表相比，星期列表的單元格高度通常更小，在30~36pt之間；
  2.每個單元格寬53pt (53×7=371)，所以兩側有2pt的留空；
  3.每個單元格內部，文本與單元格水平垂直居中；

實例七

1.這是另一個解決無法整除問題的方案，這裡首先確定單元格寬度為48pt，這樣總寬度就會遠遠小於375pt，這時候將其整體水平居中即可；

2.文本與單元格水平垂直居中；

5.「日期列表」的表現形式

• 形式
  陽曆必須有，陰曆可選。
  上月和下月的日期可以有也可以沒有，如果有的話顏色做淡。
  下圖18展示了幾種當前日期和被選中日期的樣式。
  1.主色線框矩形表示「今日」，輔色填充矩形表示「選中日」；
  2.主色填充圓形表示「今日」，輔色填充圓形表示「選中日」；
  3.主色線框圓形表示「今日」，輔色填充圓形表示「選中日」；
  4.主色文本表示「今日」，輔色填充圓形表示「選中日」；
  P.S.雖然原型中出現了灰色，但是具體製作的時候可以任意挑選與主色相搭配的輔助色。

• 位置
  作為所有泛日曆組件的主體，日期列表佔據了整個組件絕大部分位置，具體應當在「星期」區域之下。

• 尺寸
  尺寸上來說，「日期列表」所有元素的寬度都應當與「星期」一致，高度可以略高一些，文本的對齊方式也需要一致。
  PS.實例八和實例九為日期單選的情況，實例十為日期多選的情況。
  實例八
  該實例中同時存在陽曆和農曆，所以它們的對齊關係尤為重要，具體如圖19所示。
  1.陽曆和陰曆同時存在的情況下，應當更強調陽曆，可以通過字重加粗、顏色加深來強調；
  2.為了給單元格寬度取整，必須微調寬度數值，這導致兩邊有1pt的留空；
  3.每個單元格內部的對齊關係，陽曆文本和陰曆文本水平居中，兩者之間垂直距離5pt，陽曆文本和陰曆文本作為一個整體，與線框水平垂直居中；

實例九

1.實例九隻有陽曆存在，所以只要保證文本、線框以及單元格水平垂直居中；

2.為了給單元格寬度取整，必須微調寬度數值，這導致兩邊有2pt的留空；

實例十

實例十為一個短租類app的 date picker ，所以可以看到幾個明顯的特徵，一是出現了處于禁用狀態的日期，二是連選的日期有其獨特的樣式，如下圖21。

1.行內選中和跨行選中在下圖21中已經都有了體現，淺色的圓角矩形底在單元格邊界處而不是屏幕邊界處斷開；

2.兩端的圓形以及文本與單元格水平垂直居中；

3.在短租類app中，當日之前的日期和已被預定的日期應當顯示為禁用狀態 (如6日之前的日期和15、16日) ；

三、尾巴

至此對於泛日曆組件的思路記錄已經到達了尾聲，但光憑文中寥寥幾個實例是遠遠不夠囊括所有泛日曆組件的樣式的，尤其是設計師在設計這樣的組件的時候發揮空間巨大，甚至在飛機稿中可以看到更貼近平面排版的樣式，所以在做這樣的組件的時候，方法論顯得尤其重要。

當然，日曆的寬度總是7的倍數這一點會讓人在設計的時候非常難受，所以需要自行權衡尺寸與對齊之間的關係，我自己的權衡不一定是最完美的，只是提供了一些思路，僅供大家參考。

---

下載目前整理的組件素材：

關注公眾號「超人的電話亭」並回復——「組件」

還可以加入QQ群: 476240090

推薦閱讀：