快訊!我的新書今天開始可以在天瓏網路書店預購啦!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

UI設計

  • UI進化論-行動裝置使用者介面設計

    此文為閱讀此書的讀後心得:http://www.books.com.tw/products/0010471021 閱讀想法 這本書算是為專業的產品設計師所寫的,會講到許多有關於如何管理一個專業的設計團隊、制定開發流程、設計師頭銜討論,以及設計師如何訓練自己的藝術感等。並且也有說到一些相關電腦知識,例如掌上型行動設備的基礎知識之類。主要是以設計師的角度,去探討該如何去成為一個產品經理,然後開發一個產品。 也因為此書完全是以設計師角度去撰寫的,我是程式師,以想了解怎麼設計行動裝置的角度去看此書,很多地方會因身份角度不同而較無意義,不過或許對於設計師而言是一本很有意義的書。 重點筆記 使用者如何看待產品:這邊告訴我們使用者會怎樣看待我們的產品 合格的產品 優秀的產品 卓越的產品 如何將設計商品化 做市場需求的觀察:包括人口特徵、使用行為、利潤潛力、價值觀、需求、動機、購買因素、態度、產品使用場合、地理位置 使用者研究:目標族群的身份、使用場合、怎樣會讓使用者感覺這是個好商品、為使用者和產品間建立感情的聯繫(例如遊戲打寶,因為有感情因素,使用者會願意花時間去練功)、觀察使用者想買這個APP的目的,要能符合他們想像中的目的。 研究目標市場的文化內涵 使用者分析與研究 分析方法 當我們想要做一個行動介面的產品設計圖,除了美術的畫面及色彩設計外,對使用者的分析及研究也非常重要,這一篇是這本書裡我覺得最喜歡的,它提供我們怎麼去設計一個行動介面的動線的方式。在此介紹如下: 任務分析法:把特定的任務分成好幾個階段,先想好自己的APP想要提供給使用者那些功能,然後把特定的功能分解成多個步驟。例如像穿襯衫,可以分解為:雙手抓住襯衫領子>把襯衫披在肩上>右手穿進袖子裡,從袖口伸出>左手穿進袖子裡,從袖口伸出>把後襟拉平>把左右門襟對齊 這邊也列出一些心智模型工具:物理符號系統、諾爾曼模型、流程認知模型、SOAR模型、心智的社會模型、動力振盪理論模型、大腦協調學。 情境設定法:要包含角色和劇情。如在那邊、發生什麼事、怎樣的狀況下會想操作系統,不同情境下會需要不同的設計。例如會議中,靜音模式就很重要,或是在家裡,那就要有輕鬆、方便的感覺。 社會性研究法:研究一些社會的事件影響產品的事件。例如使用者的使用心得影響銷售的狀況、或是被影響等等。理解不同地域、文化背景、社會環境中的介面風格。 範例:MP3播放器 定義產品功能:明確定義出產品要有的功能有那些 繪製互動設計流程圖: 繪製介面原型:最簡單的版面元件位置配置 視覺設計:先設定APP主要要使用的色彩有那些(先配色),然後再繪製介面細節…

  • Flat Design 座談會筆記

    講師介紹 Amy Megumi Kuo http://happyux.hpx.tw/conf/ch/ux-usa-tibco-amy-kuo/ 從政大畢業之後就到美國工作。原本是在做汽車面版設計,後來轉到手機和軟體的介面設計。 因為開發裝置的不同,在開發限制上會有所不同。 例如汽車的裝置在設計上,由於許多的按鍵仍然會是實體按鍵,但是手機與軟體則是完全要設計在畫面上。 會造成在設計方針上很大的不同 Flat design 的基本原則 首先要先介紹Flat這個詞 flat (N) 平面 skeuomorphism 擬真,在過去而言,對user來說還不熟悉,所以會用擬真的設計,希望讓使用者第一次接觸就知道如何使用。 flat design較有名的是microsoft和apple還有google。 在這邊比較了一下google的設計與ios的設計上的差異 google的原則 icon盡量簡單 每個icon都需面向前面,不可有角度 陰影簡單且同光源方向(左上)…

  • IPhone元件介紹

    表格視圖,文字視圖和Web視圖 狀態欄:狀態欄顯示與使用者裝置相關的重要資訊,包括電話信號強度,當前網路連接和電量資訊。 導覽欄:導覽欄位於應用程式螢幕的上邊緣,在狀態欄之下。導覽欄通常會顯示當前視圖的標題,包含導覽控制元件,並在適當的情況下也可以包含作用於視圖內容的控制元件。 工具欄:如果您的應用程式為使用者提供了一系列可在當前上下文中執行的動作,那麼您可以為使用者提供一個工具欄。工具欄的外觀要力爭與應用程式中的其它欄目的外觀保持一致。例如,如果您使用半透明的工具欄,就不要將它與不透明的導覽欄一起使用。此外,請避免在同一方向的不同螢幕中改變工具欄的顏色或半透明效果。 標籤欄:標籤欄使使用能夠在應用程式的不同模式或不同視圖之間進行轉換,並且使用者應該能夠從應用程式的任何地方進入這些模式。 在應用程式螢幕中使用視圖和控制元件 表格視圖:裡面包含許多元素,並可以使用表格視圖實現常用的使用者操作。如:選項列表;導覽層次資訊;查看按概念分組的資訊 有幾個表格操作元素: 展開指示符:當這個元素出現時,使用者知道他們可以點選這一行中的任意位置來查看下一級的資訊,或是與當前列表項相關的選項。 當選中一行後會顯示另一個列表時,應使用展開指示符。不要使用展開指示符來顯示某個列表項的詳細資訊;這種情況下應使用詳細資訊展開按鈕。 詳細資訊展開按鈕:使用者可以通過點選該元素來查看某個列表項的詳細資訊。在表格視圖中,可以在某一行中使用詳細資訊展開按鈕,來顯示與該列表項相關的詳細資訊。請注意,與展開指示符不同,詳細資訊展開按鈕所執行的動作可以獨立於行的選擇動作。 刪除按鈕:使用者通過點選該元素可以刪除對應的列表項。 刪除控制按鈕:使用者通過點選該元素可以顯示或隱藏每個列表項的“刪除”按鈕。 行插入按鈕:使用者通過點選該元素可以向列表中新增一行。 行排序控制元件:當該元素出現時,使用者可以拖動一行到列表中的另一位置上。 選定符號:該元素出現在列表項的右側,表明該項當前被選中。 開關控制元件 文字視圖 Web視圖:Web視圖是應用程式螢幕上可以顯示豐富的HTML內容的一片區域。除了顯示web內容之外,web視圖還提供了一些元素來支援使用者瀏覽開放的網頁。雖然您可以選擇向使用提供網頁瀏覽功能,但是最好避免讓您建立的應用程式看起來像是一個小型web瀏覽器。 應用程式控制元件 活動指示器:活動指示器表示有一項持續時間未知的任務或過程正在進行當中。(請參考UIActivityIndicatorView類) 日期時間選擇器:日期時間選擇器為使用提供了一種簡單的選擇特定日期或時間的方式。(請參考UIDatePicker類) 詳細資訊展開按鈕:詳細資訊展開按鈕提供了關於某一項的額外資訊或更詳細的資訊。(參考UIButton類) 資訊按鈕(參考UIButton類) 標籤:標籤是一種大小可變的靜態文字。(參考UILabel類)…

  • IPhone人機界面指南(HIG)

    中文版下載:iPhone-HIG(人機界面指南) 英文版下載:MobileHIG HIG(人機界面指南)是apple在審核app時,給開發者去參考的條文, 只要想要在ios平台上開發app的開發者,在上架時,都必需同意自己的應用程式符合裡面的規範。 這也是app開發者在開發完APP後,常常會被apple退件的原因。 因此建議有志要開發iphone app的人可以在開發前先研讀一下這本規範手冊。 HIG將應用程式分類成三大類型 生產力應用程式:幫忙使用者管理資訊及完成工作。資訊是階層架構的,可以透過向下深入更多層級而瀏覽更多資訊。 效率型應用程式一般採用多個視圖,通常每一視圖顯示一個層次的資訊。使用介面通常簡單,整潔且由標準視圖和控制元件組成。效率型應用程式通常沒有很多自定義介面。原因在於效率型應用程式專注於資訊和任務,而非環境或體驗。 融入式應用程式:遊戲是典型的例子,這種應用程式使用非常客製化的介面,讓使用者與裝置互動,HIG對這種應用程式的規範比較不那麼嚴格。 使用者的焦點在於視覺上的內容和體驗,而非體驗背後的數據。 工具應用程式:透過盡可能少的互動與組態設定提供使用者特定的資訊。這種APP通常比生產力應用程式有更多的介面且更加被要求要符合HIG規範。 實用型應用程式俱有視覺上的吸引力,但是又能夠突出它們顯示的資訊。使用者使用實用型應用程式來查看一些事情的狀態或是查找一些東西,所以使用者希望能夠快速方便地看到他們感興趣的資訊。因此,實用型應用程式的使用者介面十分簡潔,並提供簡單的,標準的視圖和控制元件。 實用型應用程式一般以平面列表的方式顯示資訊;使用者通常不需要深入資訊層次結構。實用型應用程式中的每一個視圖通常都提供同樣的數據組織結構和細節深度,但是數據來源可以不同。由此,使用者可以打開單個實用型應用程式以對多個主題進行相似處理。一些實用型應用程式能顯示打開的視圖的數量;由此使用者可以按順序瀏覽,在一個視圖後選擇另一個視圖。(例如下圖使用者可以用上一層的設定界面讓下一層的天氣資料顯示不同地區的資訊) 開發APP時要注意的點 畫面比電腦小很多:應考量將複雜的畫面簡化 記憶體有限:因為ios的記憶體不包括磁碟交換空間,所以在app開發時要注意不能同時使用太高的記憶體,ios在記憶體不足時,也是會從耗記憶體最高的app開始關閉。 每次只能顯示一個視窗:不能同時瀏覽多個視窗,只可以依序瀏覽。 同一時間只能運行一個程式:因為當接電話、切到另一個應用程式等,現有的應用程式將被關閉。應要注意在使用者離開再回來時的畫面順暢度。 簡單易懂的操作說明  人機介面準則  當使用者操作螢幕上的對象時,這些對象保持可見,並且操作結果是一目了然的。 讓使用者做出選擇,而不是要求他們進行開放式的輸入,這樣能夠讓使用者能夠集中精力通過您的程式完成任務,而不是疲於記憶如何操作。 如果有一個動作,使用者需要長時間的等待,應該回饋一個音效或圖案。在完成資料下載時,也應讓使用者知道動作已完成。應隨時回饋使用者,讓他能了解現在系統正在做什麼。…


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!