iT邦幫忙

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

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

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

昨天分享了以 Daily UI04-Calculator 計算機 UI 的切版 HTML 架構,基本的雛形已經出現了,今天主要從調整樣式的方向和大家分享,目前為止寫好 HTML 結構後,畫面大致如下:
https://ithelp.ithome.com.tw/upload/images/20180111/201032347L8xqi0G2J.png
現實是殘酷的,沒有樣式的畫面就是如此醜陋,所以接下來要在我們的介面加上點綴。


SCSS 變數設定
SCSS可以自定一些常用到的變數,以便重複性的使用,這適合用在設定全站字型大小、常用色等。
此案例的基本色有三種灰色、綠色,故我將其設定成變數如下:

$calc-green: #00f2e6;  //綠色
$calc-light-grey: #c1c1c1;  //淺灰色
$calc-grey: #575757;  //灰色
$calc-deep-grey: #4d4d4d;  //深灰色

計算區塊(calculate):
此區塊為顯示數字的區塊,一般來說與數字有關的欄位顯示較多為靠右對齊,故這邊需針對靠右對齊做設定,其次是背景色彩及左右間距,設定如下:

.calculate {
    background: $calc-grey;
    text-align: right;
    padding: 50px 40px 2px;
}

做完此區塊樣式設定後,畫面如下:
https://ithelp.ithome.com.tw/upload/images/20180111/20103234e3oINo5kWN.png

這個區塊又細分為算式區塊(process)及輸入數字區塊(keyin),以下再分別針對其細節做樣式設定:

  • 算式區塊(process):
    此區塊設定字體顏色為淺灰色、文字大小為28px,及調整與下方區塊的距離。
.process {
    color: $calc-light-grey;
    font-size: 28px;
    margin-bottom: 0; 
}
  • 輸入數字區塊(keyin):
    此區塊設定字體色彩為白色,字體大小為100px,需特別移除掉input預設的白色背景及邊框。
.keyin {
    color: white;
    font-size: 100px;
    line-height: 1em;
    margin-top: 5px;
    background: none;
    width: 100%;
    text-align: right;
    border: 0;
    outline: none;
}

做完此區塊樣式設定後,畫面如下:
https://ithelp.ithome.com.tw/upload/images/20180111/20103234GGhNbm2PEt.png

如此一來上半部的樣式已設定完成!接下來設定下半部區塊的樣式。

按鍵區塊(keyboard):
下半部我們定義為按鍵區塊(keyboard),此區塊區針對整體高度、背景色及四邊間距做設定。特別說明高度的部分以 css calc 計算的語法設定,將其設定為裝置整體高度(100vh)扣掉上方calculate區塊高度(220px),完整寫法為:height: calc(100vh - 220px);,完整設定如下:

.keyboard {
    height: calc(100vh - 220px);
    background: $calc-deep-grey; 
    padding:  15px 7px; 
    .row {
        .col {
            text-align: center;
        }
    }
}

設定完此區塊樣式後,畫面如下:
https://ithelp.ithome.com.tw/upload/images/20180111/20103234ZjjaAALMKz.png

接著針對數字鍵的樣式做調整,我們將白色框的按鈕定為預設的數字鍵,以 class 名稱 btn 為預設按鈕樣式。

  • 白色按鈕(btn):
    除了針對外框、文字顏色、大小做設定外,別忘了要針對點擊時的顏色變化做調整,點擊狀態的樣式需以 active 來做設定,可見下方寫法,點擊時預設白色按鈕的背景色會變為白色、字體色彩變為深灰色。
.btn {
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 55px;
    font-size: 20px;;
    border: 1px solid white;
    border-radius: 35px;
    color: white; 
    background: none;
    margin-bottom: 15px;
    position: relative;
    &:active {
        background: white;
        color: $calc-deep-grey;
    }
}

預設按鈕設定好後,畫面如下圖:
https://ithelp.ithome.com.tw/upload/images/20180111/201032349OzMeUUKfn.png

  • 綠色按鈕(btn):
    綠色按鈕以 class 為 btn-green 設定樣式,與預設白色按鈕的差異僅在框線及文字的色彩,故只需在寫 class 時 將 btn-green 放在 btn 後方,蓋掉預設按鈕的邊框擊文字色彩即可,寫法如下:
.btn-green {
    color: $calc-green;
    border-color: $calc-green;
    &:active {
        background: $calc-green;
        color: white;
    }
}

網格系統間距調整
最後針對 bootstrap4 預設的網格系統間距做調整,bootstrap4 預設網格間距為 30px, 而此計算機 UI 的網格間距為 20px,故須對此做調整。
設定的方式可參考「切版起手式,以Daily UI 01-Sign up為例 2/2」這篇有提到,需至 bootstrap 的variables.scss 檔案中修改,找到 $grid-gutter-width 這個變數,預設為 30px, 這邊須將其改為 20ox。
https://ithelp.ithome.com.tw/upload/images/20180111/20103234zgeyYacNHM.png

以上就是以 Daily UI04-Calculator 為主題的切版說明,若想參考實作檔案,請至我的 Github 下載,謝謝!

-Anny


上一篇
切版-以Daily UI 04- Calculator為例 1/2
下一篇
淺談APP介面設計規範,以Daily UI 07- Setting為例1/3
系列文
介面設計流程與開發230

尚未有邦友留言

立即登入留言