iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
自我挑戰組

介面設計流程與開發2系列 第 22

切版-以Daily UI 04- Calculator為例 1/2

經過前三篇詳細介紹計算機設計的相關資訊及概念後,今天要以設計的畫面進行切版,此專案因為在數字按鈕的部分有等分的排列方式,故同樣以 Bootstrap4 架構進行開發,以當中的網格系統 ( Grid System )製作等分排列的部分。

HTML 架構
依設計畫面,切版架構上將其分為上下兩個區塊,分別是上方計算的區塊(caculate),及下方數字按鍵區塊(keyboard)。

  • 計算區塊(calculate):又分為上方加總過程(process),及數字顯示區塊(keyin),HTML結構如下:
<div class="calculate">
    <p class="process">0+5</p>
    <input class="keyin" value="5">
</div>
  • 按鍵區塊(keyboard):此區塊以 Bootstrap4 的 Grid System 進行排版,詳細說明請見下方的 Grid System說明。白邊的數字按鈕因為樣式重複性高,故將白色按鈕設定成預設樣式,這邊定義 class 名稱為 btn,而藍綠色邊的按鈕則是設定 class 為 btn-green,只需針對邊的色彩及文字顏色另外設定即可,HTML結構如下(以加號按鈕為例):
<button class="btn btn-green">+</button>

Bootstrap4 Grid System
Bootstrap4 的網格系統最大的特點,就是採用 flexbox 概念建立而成排版系統,共有 12 欄及5個預設的響應式設計分段點 ( <576px、≥576px、≥768px、≥992px、≥1200px ),欄間距預設為30px,外層務必要以 class 為 row 的標籤包起來,基本 HTML 結構如下:

<div class="row">
    <div class="col">
      第一欄
    </div>
    <div class="col">
      第二欄
    </div>
    <div class="col">
      第三欄
    </div>
</div>

網格系統排版畫面
https://ithelp.ithome.com.tw/upload/images/20180110/20103234ZDDGma2GQ4.png

此計算機設計橫向一排有四個按鈕,有就是將 12 欄的網格系統分為 4 等分,HTML 架構如下(以最上排按鈕為例):

<div class="row">
    <div class="col">
        <button class="btn btn-green">AC</button>
    </div>
    <div class="col">
        <button class="btn btn-green">+/-</button>
    </div>
    <div class="col">
        <button class="btn btn-gree">%</button>
    </div>
    <div class="col">
        <button class="btn btn-green">÷</button>
    </div>
</div>

最上排數字按鈕切版畫面
https://ithelp.ithome.com.tw/upload/images/20180110/20103234tRgOIfHauR.png

最下面一排的按鈕較特別,因為右邊有個等號按鈕,它的寬度相當於兩個按鈕的寬度,故用網格系統排版時,將其分為三個區塊,而第三區塊占畫面寬度的一半,HTML 結構如下:

<div class="row">
    <div class="col">
        <button class="btn">0</button>
    </div>
    <div class="col">
        <button class="btn"><span class="dot">.</span></button>
    </div>
    <div class="col col-6">
        <button class="btn btn-green">=</button>
    </div>
</div>

最下排數字按鈕切版畫面
https://ithelp.ithome.com.tw/upload/images/20180110/20103234vlt5zlLxpK.png

以上主要以 HTML 結構分享為主,明天將介紹樣式 CSS 的部分,若想參考實作檔案,請至我的Github下載,謝謝!

-Anny


上一篇
色彩與使用者行為引導,以Daily UI 04- Calculator為例 3/3
下一篇
切版-以Daily UI 04- Calculator為例 2/2
系列文
介面設計流程與開發230

尚未有邦友留言

立即登入留言