Posts Tagged ‘UI’

一些設計App的UI時要注意的地方

Friday, January 3rd, 2014


以下講的是基本原則,不是說完全不可以,但最好盡量避免。請記得一件事,你每設計一個讓使用者覺得不好用、不方便、不直覺的東西,就是加速他離開你的App不用。

1. 不要在一個頁面同時有垂直滑動(Vertical Scroll)及水平滑動(Horizontal Scroll)的UI設計。因為這會造成使用者操作非常不便,會常常誤判。不用說某某知名的App有這樣做,我們就一定要學著他做。因為搞不好它的使用者也是在抱怨它這設計很難用,只是他們不得不用它。

2. 不要將網頁的操作動作搬到App來。也就是Double-Click及鼠標滑過(Hover)的提醒都不要有。另外長壓(Long-Touch)的動作也最好不要有,因為這些動作對Touch Screen的使用者說來是一種很不直覺的動作。以工具類型的App來說,比較好的UI設計最好就只有點擊(Single-Click)與滑動(Scroll)兩種動作就好。多指觸碰(Multi-Touch)和Shake的動作必要時再加入。拖曳(drag & drop)的動作,要視狀況而定,如果可以幫使用者省下很多操作&設定的動作,那就做吧!

3. 功能button的擺放位置要與Device本身的設計一致。例如,Apple的確認視窗cancel button都是擺左邊,submit button都是擺右邊。那我們設計的App中有出現cancel / submit button的位置也要一致比較好。

4. 每一個頁面若有功能類似的UI元件(例如toolbar),最好都擺在固定的位置,不要跳來跳去。讓使用者知道,當他要用到這個功能時,就是要到那位置去找。

5. 每個button或可點擊區域的最小尺寸不宜小於 32 x 32。再小就會讓使用者覺得很難按。可以是圖片呈現的大小比較小一點,但是trigger touch event的區域大於呈現的區域。

6. 該換頁的地方就要換頁,該有back按鈕的地方就要擺。不要想說為了畫面的美觀而犧牲了操作的便利性。操作流暢度的重要性並不會比畫面美觀低。

7. 不要只從開發者、測試者的角度去想UI要怎麼做。如果有個地方對常常需要做測試的人是個很困擾的或覺得有點奇怪,但對使用者來說完全沒有影響。那就應該保留它,而不是多做了一些額外的判斷或功能或選項,這樣反而會讓使用者覺得很困惑。

8. 有些規範(rule)去適度得限制使用者能做的事是好的。有時候不需要給使用者太多彈性。如果說因為要有彈性而需要使用者多做一些事操作和設定,這樣反而會讓使用者覺得更麻煩。我舉個例子,python這程式語言嚴格限制了程式縮排及換行的標準,開發者只要寫錯一個空行,編譯就會失敗。就像你寫一篇作文時,老師叫你每一個段落開頭都要空兩格一樣的意思。這對開發者來說是很不彈性的。但是python開發者寫出來的東西,一定保證都是排版整齊的程式碼。這作法在其他程式語言很少見,但卻沒有人去抱怨它,反而很多人覺得這是一個超棒的設計。因為我再也不會看到亂七八糟的程式碼了!! 結論: 人類是需要規範的生物(對某些人來說)

圖片的部份:
1. 不要將任何語言文字做在圖片上,因為這對日後App要做多國語言時,會是一個很大的困擾。例: 不要做三張底圖一樣,但文字不一樣的”確定”、”取消”、”重設”按鈕圖。而是只要一張不包含文字的按鈕底圖。

2. 圖片的的尺寸要盡量精簡不要做成全螢幕滿版。意思是,如果有一張圖片你知道在某個頁面只會擺那張圖,而且一定是放在正中間的位置,但它的實際尺寸可能只有240 x 60。那你就應該只做成240 x 60的去背圖片,而不是滿版已經置中的320 x 480圖片。一來是這樣圖片所暫用的記憶體會比較小(開發App時,記憶體的使用量是緇絑必較)。二來是擺放位置讓開發者自己調,日後如果要更改位置也比較方便,且不會有不同螢幕解析度而導致圖片變形的情形。

3. 同類型or同功能的圖片最好尺寸做的一樣。這樣程式在做排版時會比較方便計算位置。

4. 檔名統一用小寫英文及底線組成。例:
CalendarEvent-1.PNG -> X
calendarEvent1.png -> X
calendar_event_1.png -> O

5. 檔名內的文字命名的順序,以功能或類別為優先。例:
setting_account_btn.png -> X
btn_setting_account.png -> O
1_wanwan_sticker.png -> X
sticker_wanwan_1.png -> O

6. 做圖片時,原始檔盡量做大一點的尺寸。因為圖片縮小後不會差太多,但一放大就悲劇了。例: 如果App裡有個地方需要一個64 x 64的button圖片。那你應該是做一個512 x 512的原始圖檔,放到App時再去縮。不要只做剛好64×64的圖片,不然哪一天又出了一個4倍解析度螢幕的手機時,就悲劇了。

to be continued…
有想到再補上

jQuery Browser Support Plugin

Saturday, November 13th, 2010


Recently, I write a jQuery plugin to detect IE browser and show up a dialog to tell users to download other better browsers. I hope more and more websites can apply it to every web page to block IE browser. IE browser is not deserved to get well supported because it’s a broken and crap browser.

Here is the plugin home URL:
http://fstoke.me/jquery/browser-support/

Please download it and try~~ ;-)

You also can join the Facebook fans page here:
http://www.facebook.com/pages/I-Hate-Internet-Explorer-IE/129502355576?ref=ts

如何得知HTML Page裡目前Focus的Element?

Friday, March 5th, 2010

document.activeElement 這個變數會指向目前取得focus的element

所以,我們可以利用這個變數來判斷某一個element (如:input)是否有focus
依據有無focus,然後做不同的處理方式

Example:

if( document.activeElement == element ) {
    if( text == "" || text == defaultText ) {
        inp.removeClass("ghost");
        inp.val("");
    }
} else {
    if( text == "" || text == defaultText ) {
        inp.addClass("ghost");
        inp.val(defaultText);
    } else {
        inp.removeClass("ghost");
    }
}

這段code是用來做下面ghost(輸入欄位預設文字)這個效果:

滑鼠點了Twitter的輸入欄位後:

Reference:
http://stackoverflow.com/questions/497094/how-do-i-find-out-which-javascript-element-has-focus