寫UI到底難在哪裡 2

作者: vgod (single) 看板: Soft_Job
標題: Re: [請益] 寫UI到底難在哪裡
時間: Fri May  6 00:38:48 2011

就像其他任何事一樣，寫UI可以很簡單，也可以很難
前面已經有板友提到設計和usability方面的難處，所以我只補充技術和實作方面的
(以下的UI泛指GUI, 文字介面或是tangible UI不在討論範圍內)

做UI的入門工作不外乎把元件拉到定位，改改屬性，加上event handler
如果只用標準元件(button, check box, slider...)來滿足設計師的需求
這件事就沒有太多技術上的困難
比較容易碰上的問題只有如何保持UI的responsive
也就是user做一個動作後不能讓UI當住不動
如果需要做長時間的運算, 就該提供適當的feedback讓user知道發生了什麼事
而這意味著把真正的運算從event handler中分離出來
於是就會牽涉到multi-thread和syncronization,
以及toolkit的multi-thread safety問題(不是每個thread都能隨意更新UI的)

稍微進階一點
和其他程式的溝通(copy/paste, drag-n-drop)是另一個入門常碰到的問題
支援copy/paste是一個非常基礎的功能,
但因為user可能需要copy你的程式中的item並貼到別的地方,
或是paste其他程式的data(有可能是html, excel cells, 圖, 一堆icon..)到你的程式裡
處理各種千奇百怪的格式和data常常是一個讓人頭痛的問題
drag-n-drop也是有類似的問題, 因為user可能會拖千奇百怪的東西進來,
或是把你的UI item拖到其他地方去
一個好的UI是要能夠應付這些情況的

如果設計師夠厲害，那工程師很可能就會遇到下一階段的難題: 自己打造非標準的UI元件
自訂UI元件需要對整個toolkit的架構和設計有充分的了解
因為現在流行的toolkit都是以物件導向的方式設計，
自訂UI時就得知道要override哪些method, 或是上層如何實作的細節
舉個例子，
假設你今天需要把一個普通的text pane加上syntax highlighting的功能, 你要怎麼做?
雖然這是在很多IDE中都有的功能，但並不是一般的GUI toolkit會提供的元件
如果你想自己做一個code editor，很容易就會碰上這個問題
更進一步, 如果要在text pane旁邊加上行號, error marker, folding marker...
基本上你得了解到原有的標準元件是由哪些更小的部分構成, 以及怎麼"畫"出來的
這樣你才能在對的位置畫上你要的東西

而以我自己寫IDE的經驗來說，最慘的是這些元件內部的細節是非常缺乏documentation的
也就是說你要嘛就看它的source code(如果幸運有得看的話), 不然就只能自己猜
更糟的是很多元件內部都有一些magic number (border, margin, padding等等)
如果同時又要顧到跨平台和i18n的相容性, 要自訂出一個正確的元件可以說是惡夢一場..


簡單的說，如果只是要做一個平凡的UI, 只是放滿一堆button和text field
那寫這種UI程式真的蠻無聊的
但現在很多成功的軟體, 都可以歸功於整體UI和UX的優良設計和實作
如果仔細觀察, 就會發現這種軟體絕對不是只用了一些標準元件就交差,
而是精心設計了特殊的呈現方式或是workflow來滿足user的需求
一個好的UI是不會被現成的toolkit和元件限制住的, 而為了實現好的設計,
背後就需要有堅強技術背景的工程師去實現它

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 128.30.86.53
推 StubbornLin:推 自己寫控制項真的很辛苦 什麼都得自己畫= =         05/06 00:43
推 twk:推~ 這個vgod該不會是那個追求神乎其技的程式設計之道的vgod?   05/06 00:46
推 twk:這ip...SIKULI!!!                                            05/06 00:49
推 MarcusWayne:這真的要跪下來敗了  sikuli的作者阿!                 05/06 00:51
推 TroyLee:推                                                      05/06 00:57
→ zvn:已經自訂了好幾個component，抓了好幾個library bug的血淚推    05/06 00:58
推 tomap41017:推阿                                                 05/06 01:02
推 scan33scan33:也只能推了                                         05/06 01:16
→ askeing:咦！推～～～                                            05/06 01:21
推 Ting1024:後，這版居然這麼多神人 ..拜不完 ><                     05/06 01:51
→ Ting1024:這篇不但要m,還要來個 triple m, mmm                     05/06 01:52
推 ykjiang:我現在搞的 UI 就是從頭開始刻的，layout manage也自己寫   05/06 02:12
推 Arton0306:只能推了！                                            05/06 03:46
推 porching:神人多到拜不完 Q_Q                                     05/06 04:28