輯導讀：前段時間， iOS14 升級了。蘋果的每一次升級都會引起人們的廣泛關注，畢竟它代表著行業標桿。本文作者在使用的過程中，對iOS14 中「時間控件」的設計產生了疑問，并從三個方面展開分析，提出自己的一點思考，與你分享。

前幾天升級 iOS14 后在「日歷APP」中遇到個「時間控件」使用體驗問題，在朋友圈「吐了個槽」后收到很多類似反饋，后來在使用「提醒事項APP」中發現有個類似「時間控件」，體驗下來感覺挺順溜，于是想做個對比分析看看區別。

防杠說明1：接下來聊的體驗純我的「主觀感受」，對比分析也是基于過往的經驗來聊，沒有數據也沒有其他支撐，交流為主，無他意求放過。

防杠說明2：蘋果在「日歷APP」和「提醒事項APP」這 2 個 APP 設計一定有考慮過，文章純粹從外部視角去聊體驗感受，不聊 APP 的場景&戰略&定位。

一、iOS14 的「時間控件」長什么樣

iOS14 「日歷APP」新建日程&點擊展開「時間控件」后的狀態

先介紹下「時間控件」長什么樣，上圖左邊是「日歷APP」中「新建日程」界面，點擊「開始-時間」后就展開了「時間控件」，控件中分別有這5個功能：時鐘控件（鍵盤+觸摸）、年月控件、快捷切換月份控件、日歷控件、時區功能，「提醒事項APP」的「時間控件」界面基本差不多，具體差異會在在對比中展示。

二、開始做3個角度對比

對比1：日歷間距處理

整體來看「時間控件」中的「日歷」是問題最大影響體驗最大的地方，「日歷」中的日期和日期之間的距離是大過日期和左右屏幕的距離，這會導致日歷看起來比較散不是一個整體，見下圖中黃色標記和藍色標記。

這類型的問題屬于「格式塔理論」中的「Law of Proximity接近法則」，間距沒有起到把相關元素粘起來的作用，相反把元素拆散，有種信息量很多密密麻麻的感受。

「日歷APP」中日期之間間距和屏幕間距對比

具體「Law of Proximity 接近法則」的意思是：相互接近的事物被認為比相隔較遠的事物更加相關。

格式塔理論中的接近法則示意圖

這里密密麻麻的感受還有另一個理論基礎「米勒定律」，因為人同時處理信息大約是「7±2」條信息，當信息量超出這個數量后出現，本能上一定是先排斥的，大家回想下如果你要填寫一個復雜表單時候的場景，就是這樣的感覺。

米勒定律的示意圖

我們對比下「提醒事項APP」中的日歷選擇，間距處理保證了日期距離是比外面小的，日歷看起來就是一個整體可操作的控件狀態，如果拿「格式塔理論」和「米勒定律」來看的話都是在合理范圍內，事實感受也是這樣

「日歷APP」和「提醒事項APP」日歷進行對比

對比2：上下層級關系處理

「時間控件」是通過點擊展開的，如果這個簡單控件，僅展開動效足以讓用戶理解，只是這「時間控件」中包含5個功能占了 1/2 的屏幕，動效解決不了，加上「對比1」的日歷間距問題，信息量巨大且復雜。控件里面除了標題做了「文字加粗」處理去表現層級，在「上下銜接 or 左右遞進 or 背景顏色」都沒做很多工作。

和上一級樣式是在太接近，沒有能明顯區分開，和上一層級融合到一起后，界面看起來從一行行就變成點擊后一下子增加「爆發式」的信息出現，觀感復雜+信息量變大。如果處理合適「理想中的層級關系」應該是圖片右邊這樣的，用戶一眼看到的是一塊塊而不是一個個。

日歷APP 時間控件展開后感覺是「碎裂」，理想應該右側這樣塊狀的層級結構展開。

再來對比「提醒事項APP」中的層級關系，整個「時間控件」左右都有縮進，左上和上一級的銜接處分割線也做了處理，加上上一級日期標題前有個「日歷ICON」，很自然在視覺上就出現了上下層級關系出現，內容一樣看起來清晰簡潔很多。

「提醒事項APP」中用縮進和風格線去表現層級關系

對比3：頁面布局上的對比

再把視角放到頁面布局中，「日歷APP」采用的是邊到邊布局（Edge to Edge）方式，「提醒事項APP」采用的是卡片式布局（Card）方式。

在 iOS 系統中「邊到邊布局」是從 iOS7 后蘋果開始采用的方式，優勢是把極大增加了屏幕空間利用率，可顯示內容增加，當時主打機型是 4 英寸屏 的iPhone5s，，屏幕空間有限。

iOS6 和 iOS7 設置界面的對比

從圖片中里面是不是感覺 iOS6 也有點卡片式布局的意思，其實大家當時對 iOS6 印象還是「擬物化」，這里也就不展開了。

「卡片式布局」是被 Google 推崇起來的，當時有款產品叫「Google Now」（現在已經下線），這個產品可以語音互動&主動提醒（飛機、路況、比賽比分、突發新聞等等）信息內容給到你，包含的信息內容多樣且復雜，用了卡片設計去解決了信息多而不亂的問題，信息和信息之間互不受到影響。

GoogleNow 主界面，卡片設計為主

「Google Now」產品已經下線，找了個介紹視頻（https://v.qq.com/x/page/f03052ojg4u.html），大家可以注意里面不同場景下的卡片的布局都是不同的，也方便未來的擴展。

回到這兩個頁面布局對比中，不過不展開「時間控件」這樣對比來看兩邊布局并沒有很大的問題，具體看是要更多「包容」還是要「屏效」。

不過這里我們對比的是「時間控件」，這部分看來「卡片式布局」是更合適的，布局能包容不同復雜的信息，塊和塊&功能和功能之間是更加清楚，不會引起混亂。

現在很多產品也都在考慮「卡片式布局」，像「手機淘寶」這兩年基本上已經完全改造成「卡片式布局」，我理解是因為手淘信息流復雜&個性，照片和元素的出現都不是固定的，用卡片作為「容器」去包容「內容」，讓界面有秩序。

但這里還是要提一嘴信息流不要「無腦」追「卡片式布局」是最好，比如媒體為場景的APP，顯然「邊到邊布局」顯然更合適，比如 Instagram ，要給照片以更多的展示空間，也比如電商中對商品品質有信心的，那也適合「邊到邊布局」，比如 SNKRS，對球鞋品質表現的更加到位。

先理解再去設計「適合自家產品」的風格是個挺重要的事，畢竟一個產品風格會用很久，改動成本很高。

三、最后總結一下

真的是抱著「心驚膽戰」的心情去做的對比，蘋果設計一直都是行業標桿，這次是想趁聊對比時「拋磚引玉」聊聊「界面細節是如何決定設計品質」，這些東西非常小，合作上下游也不一定在意，覺得差不多就好。現在產品迭代速度飛快，留給設計師的時間也不多，怎么樣能夠快速有效地把細節處理好，是一個值得長期討論的話題。

最后抽取一些文章中的「關鍵詞」做個總結：

• 間距控制：有些設計師出稿或工程師開發&驗收時會忽略「間距」的價值，其實「間距」對設計品質影響非常大，背后設計理論支撐是「格式塔理論」，如果對「間距」不敏感，那要多練習練習去找好的產品設計去觀察和感受。
• 米勒定律：很多人看界面覺得亂，為什么感覺亂背后可以通過「米勒定律」做設計理論支撐，人在同一時間處理信息程度是「7±2」個，數量越多越亂。
• 層級關系：表單或復雜頁面中的界面需要把層級關系表現到位，不然界面會亂七八糟，在 iOS11 時候蘋果已經注意到這一點并且已經提倡過，閱讀了解「iOS11 設計理念和 3 個設計方向」。
• 邊到邊布局：一種屏幕效率利用高的界面布局，在iOS7 開始后被使用
• 卡片式布局：一種能夠把復雜信息有序融合在一起的布局，更多包容和擴展

好了，今天和大家就嘮叨到這。

作者：icojump，微信公眾號：邊設計邊管理

本文由 @icojump 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議

言

項目中前端(angular)開發中需要使用到基于時間線的UI控件，初步調研兩種,可以參考下面鏈接

https://ng.ant.design/components/slider/zh

https://echarts.apache.org/zh/cheat-sheet.html

https://echarts.apache.org/zh/option.html#timeline

echarts的timeline

本文進行了簡化和集成進angular中，需求是基于時間線展示北京、天津、河北、南京四地2000年每個月的經濟指標。最終效果圖：

首先在html中，聲明div

<div id="lineChart" style="width:100%;height:500px"></div>

在ts腳本中

import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';

import * as echarts from 'echarts';
import { title } from 'process';

@Component({
  selector: 'app-echart-time-demo',
  templateUrl: './echart-time-demo.component.html',
  styleUrls: ['./echart-time-demo.component.css']
})
export class EchartTimeDemoComponent implements OnInit {
  initCharts() {
    const ec = echarts as any;
    let lineChart = ec.init(document.getElementById('lineChart'));

    let lineChartOption = {
      baseOption: {
        timeline: {
          axisType: 'category',//time
          // realtime: true,
          // loop: false,
          autoPlay: true,
          // currentIndex: 2,
          playInterval: 1000,   
          //時間線刻度值      
          data: [
            '2000-01', '2000-02', '2000-03',
            '2000-04', '2000-05', '2000-06',
            '2000-07', '2000-08', '2000-09',
            '2000-10', '2000-11', '2000-12'
          ],
          label: {
            formatter: function (s) {
              return s;
            }
          }
        },

        title: {
          subtext: '數據來自國家統計局'
        },
		
        xAxis: [{
          type: 'category',
          data: ['北京', '天津', '河北', '南京'],
        }],
        yAxis: [{
          type: 'value'
        }],
        //第一組數據展示形態
        series: [{
          type: 'bar'
        }],
      },
      options: [
        {
          title: {
            text: '2000年1月四地經濟指標'
          },
          series: [
            { data: [4315, 2150.76, 16018.28, 20000] }
          ]
        }, {
          title: {
            text: '2000年2月四地經濟指標'
          },
          series: [{
            data: [5007.21, 2578.03, 6921.29, 20000]
          }]
        },
        {
          title: {
            text: '2000年3月四地經濟指標'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年4月四地經濟指標'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年5月四地經濟指標'
          },
          series: [{
            data: [6033.21, 3130.97, 8477.63, 17000]
          }]
        }, {
          title: {
            text: '2000年6月四地經濟指標'
          },
          series: [{
            data: [6033.21, 3110.97, 8177.63, 25000]
          }]
        }, {
          title: {
            text: '2000年7月四地經濟指標'
          },
          series: [{
            data: [6433.21, 3110.97, 8477.63, 10000]
          }]
        }, {
          title: {
            text: '2000年8月四地經濟指標'
          },
          series: [{
            data: [6033.21, 4110.97, 8477.63, 11000]
          }]
        }, {
          title: {
            text: '2000年9月四地經濟指標'
          },
          series: [{
            data: [6033.21, 5110.97, 8477.63, 20000]
          }]
        },
      ]
    }
    lineChart.setOption(lineChartOption);
  }

  constructor() { }

  ngOnInit() {
    this.initCharts();
  }
}

從上文的圖片中，列表中只展示四個地區的一組數據，未能充分利用，所以考慮再增加一組2000每月四地的消費指標，所以series里增加一個維度

 series: [{
          type: 'bar'
        },{
          type: 'bar'
        }],

而數據里也要增加一組數據

  series: [{
            data: [6033.21, 4110.97, 8477.63, 11000]
          },
          {
            data: [6033.21, 4110.97, 8477.63, 11000]
          }]

如圖,柱狀圖中各地指標多了一組

使用 axisType: 'time'

上文中使用的 axisType: 'category',這樣會將時間線上的坐標等分，簡單來說兩個刻度間距離相等，但實際使用中可能存在刻度間不是等分的，如1：00到1：10到2：00到3：00，很明顯1：00到1：10只過了10分鐘，直觀上這兩個刻度距離要小點。所以在echarts中提供了axisType為time的配置。

  let lineChartOption = {
      baseOption: {
        timeline: {
          // axisType: 'category',
          axisType: 'time',
....
          data: [
            '2000-01', '2000-03',
            '2000-04', '2000-05', '2000-06',
            '2000-07', '2000-08', '2000-09',
            '2000-10', '2000-11', '2000-12'
          ],
          label: {
            formatter: function (s) {                  
				 return (new Date(s).getMonth()+1)+'月';
            }
          }

上面的刻度數據(注意是時間格式)中是沒有2月份的，使用time,要特殊處理如label的formater。最終效果如下，發現由于2不存在，所以1到3自動跨兩個刻度。

事件timelinechanged

章目錄

一 bootstrap 時間日期日歷控件datetimepicker

應用

涉及的樣式

圖片樣式展示

pc

手機

屬性及使用示例

可用屬性列表

示例1:2017-03-30 上午 09:50

示例2：2017-03-30

示例3：僅選擇時間

2.3 weekStart 一周從那一天開始

2.4 startDate 開始時間

2.5 endDate 結束時間

2.6 daysOfWeekDisabled 一周禁用的日期

2.7 autoclose 是否自動關閉日期選擇器

2.8 startView 日期時間選擇器打開之后首先顯示的視圖。

2.9 minView 日期時間選擇器所能提供的最精確的時間選擇視圖

2.10 maxView 日期選擇器最高能展示的范圍視圖

2.11 todayBtn 是否顯示'today'按鈕

2.12 todayHighlight 當天日期高亮

2.13 keyboardNavigation 方向鍵改變日期

2.14 language 語言

2.15 forceParse 強制解析

2.16 minuteStep 步進值

2.17 pickerPosition 選擇框的位置

2.18 showMeridian 是否顯示上午/下午

2.19 initialDate 初始化日期時間

3.1綁定輸入框，并設置format選項

3.2作為組件使用：

3.3時間范圍選擇聯動

具體屬性展示

一 bootstrap 時間日期日歷控件datetimepicker

應用

手機

pc

涉及的樣式

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="static/js/moment-with-locales.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

1

2

3

4

5

6

7

圖片樣式展示

pc

<div class="col-sm-4">

<div class="input-group">

<span class="input-group-addon">開始日期</span>

<a class='input-group date' id='datetimepicker3'>

<input type='text' class="form-control" id="startDate" readonly/>

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

</a>

<span class="input-group-addon">~</span>

<span class="input-group-addon">結束日期</span>

<a class='input-group date' id='datetimepicker4'>

<input type='text' class="form-control" id="endDate" readonly/>

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

</a>

</div>

</div>

<div class="form-group col-lg-6">

<div class="input-group">

<span class="input-group-addon">活動結束日期</span>

<a class='input-group date' id='datetimepicker2'>

<input type='text' class="form-control" id="activityEnd" name="activityEnd"/>

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

<span class="input-group-addon" style="color:#F00">*</span>

</a>

</div>

</div>

手機

<div class="form-group">

<div class="input-group date form_date" id="datepicker" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:92%;">

<input class="form-control" size="16" type="text" value="${initialDate}" name="PARAM9" readonly="readonly" id="PARAM9">

<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>

</div>

<input type="hidden" id="dtp_input2" value="" />

</div>

1

2

3

4

5

6

7

屬性及使用示例

<input type="text" readonly class="date" data-link-field="date" />

<input type="hidden" id="date" />

$('.date').datetimepicker();

1

2

3

選中的日期會被存放在id為date的input里。

//設置日期時間控件

$('#datetimepicker1').datetimepicker({

language: 'zh-CN',//顯示中文

format: 'yyyy-mm-dd hh:ii:ss',//顯示格式

minView: 0,//設置只顯示到月份

initialDate: new Date(),

autoclose: true,//選中自動關閉

todayBtn: true,//顯示今日按鈕

locale: moment.locale('zh-cn')

});