跳到主要內容

發表文章

[心得] 我的第一場UX演講

演講主題: 罹癌後, 我更了解UX -  十公分的腫瘤、九頂假髮、一段癌友使用者之旅 時間:2018/02/08 19:30 地點:松菸園區2F創意劇場 講師:謝采倪 Ani Hsieh 什麼是UX? UX,全名是 User experience,中文就是使用者經驗。 網路上很多人會說UX就是在指「東西好不好用」,但其實這種說法有點抽象。而Ani的說法是 幫助使用者快速且準確地完成他的目的所作的相關決策就是UX 。我覺得是當使用者要瀏覽網頁時,要怎麼讓使用者在操作上可以快速地找到他想要的功能、準確地完成他瀏覽網頁的目的,這就是UX需要作的相關決策。或者是說,在開發一個可以讓使用者買單的產品/服務前,所作的行銷評估(主要是賣給誰?)、通路評估、產品競爭力分析等等,都是屬於UX的範疇之內。 UI 設計師 v.s. UX 設計師 UI 設計師主要負責的是「眼睛看的到的設計」。 當UI設計師收到WireFrame(有文案、功能規劃)後要進行排版並定義視覺(顏色、大小、對齊),經過確認後最後要切圖、命名後交給工程師。 UX設計師主要負責的是「產品用起來的感覺」。 Ani說UX 設計師主要是要 幫團隊統合及平衡商業需求及用戶需求 。這個說法是我之前沒有聽過的說法,我以前一直以為UX就是以使用者為出發點去規劃設計就好,沒有考慮到其實在開發上也有商業的需求,所以當Ani拋出這個論點時,我才發現,原來除了要顧慮到使用者需求之外,商業需求也是UX需要納入考量的。 UX 設計師一開始需要進行訪談,了解商業考量及用戶需求後,取的交集並整理成文件(Wireframe),讓UI設計師將之視覺化。之後要進行產品後續測試優化,讓產品可以越來越好用。 UX設計師需要具備什麼樣的人格特質? ● 要能接受失敗     其實在產品未接受使用者測試前,對於使用者行為模式的揣測都是來自於開發者的美好想像,所以當設計被使用者驗證的時候,必然會有許多地方跟原本開發者的想像不一樣,導致產品需要不斷的修正。而UX就是必須經過不斷的改善、調整,讓產品/服務可以越來越接近使用者想要的目標。 ● 同理心的人(感性、理性並重)     在產品/服務的規劃上,一方面要貼近使用者需求、了解使用者的想法(感性),另一方面又要合...

[Android] 在Navigation View(側選單)框架下加入Tab View

如果要在Navigation View下加入Tab View,就需要以Fragment的架構加入Tablayout和ViewPager 1.先建立一個layout,fragment_layout.xml,設定Tablayout和ViewPager的佈局 2.新增要切換的分頁layout及Fragment(Fragment1.java、Fragment2.java) 3.新增一個TabsPagerAdapter.java 這邊如果是extands FragmentPagerAdapter的話,要切換的View就不適合為像ListView這種動態的View(第二次點擊後畫面會無法顯示),但只要改成extends FragmentStatePagerAdapter就可以了 4.新增FragmentLayout.java,使用fragment_layout.xml的佈局,並設定PagerAdapter 執行結果:

[Android] 讓圖片跟著SeekBar一起移動

先新增一個class:需要定義一個可以隨SeekBar移動的元件 新增ImgMoveLayout.java的class,並繼承ViewGroup 設定版面編排: 在activity_main.xml中,新增SeekBar元件,及剛剛定義的ImgMoveLayout元件 在MainActivity.java中,設定隨SeekBar移動的View樣式,並設定SeekBarChange的監聽器 執行結果: 參考來源: 无懈可击之小鱼的博客

[Android] 錯誤訊息-Unable to inflate view tag without class attribute

在預覽layout時,出現了"Unable to inflate view tag without class attribute"的錯誤訊息 如下圖: 後來發現是因為view的標籤打錯了, view標籤的開頭要為大寫 !!! 原本錯誤的: 只要把原本的"view"改為"View"就可以了~ 修改後: 錯誤訊息就消失了~~

[Android] 自訂元件樣式-Switch

Switch Switch結構說明 Step1 設計Switch樣式,並放入drawable資料夾裡 thumb樣式 switch on樣式(switch_thumb_activated.9.png) switch off樣式(switch_thumb_off.9.png) switch disable樣式(switch_thumb_disabled.9.png) switch pressed樣式(switch_thumb_pressed.9.png) track背景樣式 track default樣式(switch_bg.9.png) track disable樣式(switch_bg_disabled.9.png) track focused樣式(switch_bg_focused.9.png) Step2 在drawable資料夾中新增switch_thumb.xml及switch_track.xml switch_thumb.xml switch_track.xml Step3 在activity_main.xml中增加switch元件 android:layout_width是整個Switch元件的寬度 (上圖整個background的部分) android:switchMinWidth才是更改Switch外觀的寬度 如果要更改Switch內的字體顏色: 1,在Style.xml裡新增字體的樣式,顏色、字體大小等 2,在activity_main.xml中Switch元件的標籤內增加字體樣式- android :switchTextAppearance= "@style/switch_text" 執行結果: 註:此範例為 線上元件製作網站 所產出的樣式(此網站目前 無法使用 ---2017/11/21更新)

[Android] 頁面切換的方式-ViewPager

ViewPager可讓使用者透過滑動方式切換當前畫面,通常搭配Fragment一起使用。 (1)ViewPager 繼承了ViewGroup,是一個容器,裡面可新增要顯示的畫面。 (2)ViewPager 需要PagerAdapter來提供資料。 Step1 在activity_main.xml中加入ViewPager標籤 Step2 新增要切換的layout Step3 將layout加至ArrayList裡 Step4 宣告繼承PagerAdapter的類別 Srep5 在onCreate中,將Pager指定到剛剛自訂的pager class 完整MainActivity.java程式碼