iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
IT管理

FID 打造強力前端團隊系列 第 25

行為設計

  • 分享至 

  • xImage
  •  

行為設計是關於設計和操作的關係。它關注的是對象之間的交互,以及如何將這些交互行為建模為一個整體。行為設計的目標是實現一個系統的行為,而不是其結構。

看起來很繞口,但是實際上很簡單。白話一點的就是:

「如果我們需要做什麼事情,我們就需要一個方法來做它。」

行為設計的表現形式範例: bootstrap

一個全世界的後台工程師都知道的框架,bootstrap,而前端工程師都想要學習的框架,bootstrap。

在這個 bootstrap 的世界裡面,所有事情,都做好了一個「模組」,你只需要「呼叫」這個模組,就可以達到你想要的效果。

等一下,所以行為設計的意思就是 UI 模組嗎?

不是,但 UI 模組是行為設計的一種表現形式。

那麼哦我們來看看 bootstrap 的表現形式:

<div class="alert alert-success" role="alert">
	This is a success alert—check it out!
</div>

這個寫法很簡單,但是我們可以看到,這個 alert 的模組,有一個「行為」,就是「成功」,而且這個「成功」的行為,是有一個「樣式」的,你不會有別的想法,就是「成功」。

所以這也是為何大部分時候,如果我們定義好一個 UI 框架,會大大的減少 UI 的設計時間,增加效率,本質上是因為我們定義好了一個行為。

如果覺得這個例子不夠好,那麼我們來看看另外一個例子:

python 的 streamlit 框架

streamlit 是一個 python 的框架,可以讓你快速的建立一個網頁,而且是一個互動式的網頁。它比上面的 bootstrap 更進階,因為它包含了資料和行為。

以下是一個 streamlit 的例子

from pyecharts import options as opts
from pyecharts.charts import Bar
from streamlit_echarts import st_pyecharts

b = (
    Bar()
    .add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google", "Alibaba"])
    .add_yaxis(
        "2017-2018 Revenue in (billion $)", [21.2, 20.4, 10.3, 6.08, 4, 2.2]
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="Top cloud providers 2018", subtitle="2017-2018 Revenue"
        ),
        toolbox_opts=opts.ToolboxOpts(),
    )
)
st_pyecharts(b)


你就會等到一個圖表,而且你可以互動,你可以選擇要看哪一個圖表,你可以選擇要看哪一個資料,你可以選擇要看哪一個年份。

在這裡我們完全沒有去定義這個圖表的樣式,但是我們可以看到,這個圖表有一個「行為」,就是「選擇」,而且這個「選擇」的行為,是固定的,也不會有別的可能。

當然 streamlit 還有其他例子,例如

import streamlit as st
from st_excel_table import Table

st.title("Streamlit-Excel-Table")

data = [
    {"id": "hoge", "x": 5.77, "y": 8.85, "color": "red"},
    {"id": "hogedb", "x": 15.77, "y": 18.85, "color": "red"},
    {"id": "hogeba", "x": 25.77, "y": 28.85, "color": "red"},
    {"id": "hogeas", "x": 35.77, "y": 38.85, "color": "red"},
]

Table(data, columns)

沒錯,如你所看到了,這裡就是一個 excel 的表格,你可以在這裡做一些編輯,但是你不會有別的想法,就是「編輯」。

將行為「設計」為一個模組

這種將一個行為設計為一個模組的方式,可以讓我們在設計的時候,更加的快速,更加的有效率,更加的專注在「行為」上面,而不是「樣式」上面。

行為設計可以是前端,也可以是後端,也可以是資料庫,也可以是任何一個東西,只要你覺得這個東西,有一個「行為」,就可以將它設計為一個模組。

例如我們在設計 API 的時候,每個 API 都會「回覆」些什麼,如果看到「什麼錯誤」就會回覆「錯誤」,如果看到「什麼成功」就會回覆「成功」,這些都是行為,我們可以將它設計為一個模組,下一次開發 API 的時候,就可以直接呼叫這個模組,而不用再重新設計一次。

當然你可以用很多「程式」設計模式來包裝它,但他的本意和我們剛剛的行為一樣,就是將一個行為設計為一個模組。

做 A 一定得到 B

行為設計的本質,就是「做 A 一定得到 B」,一個行為,一定會有一個結果,而且這個結果是固定的,不會有別的可能。

按照這種思維,每一個步驟和細節,都是一塊拼圖,當然包含了從前端到後段。

我知道到這裡,你一定會聽到有人大喊,我們的需求都是會變的,怎麼可能會有固定的結果?

是真的嗎?我們認真的思考一下是真的嗎?

大家可以為自己所寫過的所有需求統計一個表,再看看自己的需求,是不是真的會變?你會得到一個驚人的結果。

會變的需求,其實都只是需求的表象,而不是本質,本質上,需求是不會變的,只是表象會變,而表象的變化,只是因為我們沒有抓到需求的本質。

行為設計的本質

行為設計通常是由「主要設計者」和「主導者」發現並製作,參與者由於資訊量和知識量的不足,通常只能在「主要設計者」和「主導者」的指導下,完成一個行為設計。

當每次會議的時候,我們都會看到某些大量類似的需求冒出來的時候,你可能會發現,他們是不是本質上是同一個東西。

這也是我們將組織設計成一個瀑布式的原因,當每個分流流向同一個地方的時候,這樣主導者才可能匯集所有的資訊,並且將它設計為一個行為。

這個工作需要觀察和經驗,當你經驗越豐富,你就越能夠看到這些東西。

如果經驗不夠,那就製作經驗。


上一篇
流程設計
下一篇
知識設計
系列文
FID 打造強力前端團隊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言