聽講心得:mix2016 行動體驗設計論壇

第一次參加大型論壇,才知道票價原來要數張小朋友,學生票只要1張有找诶這不是重點,研討會主題是行動體驗設計,有幾場演講議題頗感興趣,早早的就準備搭高鐵北上,去一探究竟,地點在張榮發基金會的國際會議中心。

【聯網產品的價值與體驗設計 IDEAS】
-一連聯網產品的開箱,某設備開箱後的零組件多到天花亂墜,若不是重度或專業玩家會產生嚴重挫折感吧,還可能會有拆箱後裝不回箱的狀況。
-產品價值是否回饋使用者,從開箱>設定>使用>持續使用:
–開箱後的裝備/物件少,是好體驗的開始。
–聯網產品需要連網,提供智能家庭使用,也需要有簡單的設定說明。
–在任何環境下都可以方便操作。
–蘋果錶諸多效能比不上手機,小米手環的續航力比要久,可能也是影響持續使用的原因之一。 Read More

墨刀prototype 使用心得

墨刀
起初在搜尋APP prototype工具時,由設計大舌頭 Facebook 推薦使用…排序上還蠻高的,聽起來很像某部電影的名稱,感覺不出來他是APP原型設計工具,從加入會員到開始試用大概只需要30秒的時間,可很快速的利用網頁版進入工作狀態…也可以下載桌面版來編輯,第一特色應該是中文模式+免費使用吧。

優點:
-介面有網頁版/桌面版可使用,也可個別開啟數個編輯視窗。
-工作環境簡易,題供基本互動功能與模組,讓設計師自行搭配應用。
-各頁面可分層分類,拖曳線段連結頁面,並有流程圖預覽/編輯。
-官網提供影片教學、及討論區。
-可即時手機預覽,可模擬手勢操作。
-個人應用完全免費,可開啟專案數量未知。 Read More

討論區APP UI設計概念(下)

【討論區APP UI設計概念】

後續頁面概念補完,此篇的主題包含發/回文頁、註冊/登入頁、手機認證、連絡我們、無網路狀態;樣式與上篇3大方向相同,左圖樣式會更精簡、中圖樣式帶入一些層次與少圖示、右圖會有比較抽象圓的概念,適合使用動態過場表現。

以下是APP的模擬頁面:密碼0953/手機瀏覽需要安裝
添加FB元素概念
添加抽象元概念

【發文/回文】

01

(左圖)
-將聯盟與類型合併,再簡化頁面上的訊息量;發文與返回按鈕使用直覺性顏色,綠色表示成功/確認、紅色表示取消/刪除。返回也可以改用X表示。
(中圖)
-標頭聯盟合併,分類採左右滑動選擇。
(右圖)
-按鈕與圓的結合,白色重點按鈕,圓的貫穿與外切表示先後層次。 Read More

討論區APP UI設計概念(上)

【討論區APP UI設計概念】

針對玩運彩討論區APP(Android,進行APP介面進化的可能性,製作概念樣式。
此篇的主題包含首頁(看版/看版列/選單)、文章內容、回文通知,與舊有的介面進行比較研究,也加入了一些目前常見的,如FB的選單概念等等。

【首頁看版】


01

(右圖)
-加入Material Design的元素,面板上的按鈕收入到主選單內,保留聯盟選單,點擊右下角圖示為發文。
-每則文章滿版顯示,增加單頁的顯示數;暱稱與主題左右切割,可能依使用者習慣閱覽左or右,或許也能依網站顯示方是將主題與暱稱對調。 Read More

ES檔案瀏覽器-Android APP使用分析

在還沒有接觸google雲端時,曾經使用過早期的ES檔案瀏覽器,用在資料間的傳輸與簡單管理文件。

使用google雲端至今,才發現它也不斷的在進化,無論是介面、功能,甚至還有系列性app可關聯使用(任務管理、app/瀏覽器外掛插件等等)。新增了首頁,提供類別篩選,容量概況等等功能性大幅度增加只看到介面就可以有不彷來用用看的想法,管理檔案APP一接觸時難免會產生有點複雜的感覺,意外性的2次使用才上手。

ES檔案瀏覽器也保留了先前的UI版本,使用者可自由選擇介面下載;也支援工作上需要的一些進階功能,如在手機上直接使用FTP傳輸、在不同的雲端硬碟間傳輸、壓縮與解壓縮檔案(這個好用);在移動中也能使用手機完成一些檔案管理,低頭族無誤~

【UI設計】
-開啟後進入首頁(新增舊版所沒有的索引頁之類的,將常用功能歸納於此)。
-整體主色系藍色;主題布景可自由選擇(包含色系、布局等等)。
-導覽列更多選項,收納舊版的功能列表。
-導覽主題列,"頁面"固定開起首頁、本機、程式、我的網路,於內容中左/右滑動切換(點擊那個小圖示會很痛苦)。
-選單列常用的是本機與網路,但都可設定於首頁直接連結。
-首頁內容,目前記憶體總覽,檔案分析(Analyze),選單列主要類別總覽、常用工具。

02 Read More

Evernote-輕鬆筆記-Android APP使用分析

Evernote 雲端筆記本 v7.5

經常忘東忘西,養成隨手筆記的習慣;如果能在行動裝置上實現"速記",又容易"閱讀",那一定要來用用Evernote。

又是一款以 Google 的 Material Design 架構開發的APP-Evernote,它強調"紙感",在閱讀與操控上重視紙張的乾淨專注、層級分明。(先前發表過的類似APP,也有使用了Material Design樣式的,如Cabinet BETA 檔案管理Spendee 記帳)

來看最新版的介面,以下直接把每個新記事項目當做"紙張"來說,因為融合了Google 新介面規範的優點,Evernote將每個功能、選項、內容結合在紙張內,可直接在紙張進行操作/自由變更層級,減少了操作步驟與突顯工作區,更加直覺易懂。

而且Evernote也提供了多種型態的記事方式,可依習慣自由選擇!

————————————————–【桌面小工具】
01其實就是更快捷的筆記記錄,開啟螢幕後可直接選擇需要的筆記方式(文字/照片/手寫等等)
-可在Evernote指定記事本,專屬於快捷記錄使用;可隨意指定~
-缺點是一定要設定5個方式,不能多也不能少(有點擾人) Read More

Mobile App UX Principles – chp.5 Usability Hygiene(47p~48p)

In a search or refine form, user can move a slider control to set a minimum / maximum range (e.g. for prices or budgets)
When users need to set a minimum / maximum price or budget range in order to search for – or refine search results – items, use the horizontal slider control. A slider is easy to swipe horizontally and provides simple visual cues to customise this action. Things to consider:

-Values can be entered easily.
-Numbers aren’t hidden when slider is being operated (by fat fingers).
-For some range types a discrete slider with a set of stops with predefined values may be better than a continuous range – and, you could add a histogram to a discrete slider to illustrate inventory levels available in each stop.

在搜尋或篩選表單上,使用者可以利用拖動條(slider control),去設置最小/最大範圍(如設置價格或預算)
當使用者要設定一個最低到最高的預算範圍搜尋時,可以使用水平方向的拖動條,簡單利用拖曳方式來增減數字,需要考慮:
可以很容易操作。
-操作拖動條時不要隱藏數字(手指不一定能很精確的微調到正確位置)。
-對於某些類型的範圍,可以設定拖動的級距,如一個大範圍(100>200>300)會比小範圍(100>101>102)來的好。-也可以在各個級距中加入長條圖,拖動到該級距時出現說明。

In a form, user can select times or dates from a picker control(e.g. for entering travel dates, date of birth or time of arrival)
When users need to select times or dates provide a native time and date picker control, which make selection fast and familiar, and support multiple formats
Android can display up to 3 wheels concurrently
iOS up to four wheels concurrently (each wheel displaying a value in a single category, with formats such as Date and time, Time, Date, and Countdown).

在表單上,使用者可以從一個picker control選擇時間和日期(如輸入旅遊日,出發或到達時間來看)
-當使用者需要選擇時間或日期時,可以統一使用內建的(熟悉的)picker control。
-在其他APP的操作上,若需要選擇時間或日期,也可以支援。
Android 顯示3個類型(年月日)
iOS 顯示4個類型(每個類型的內容,日期和時間以相同格式顯示;選取中的數值,上下方顯示遞增/遞減的數值)

Read More

AHORRO-輕鬆記帳,簡單理財-Android APP分析

【AHORRO】

花錢要記得,記帳是生活理財的第一步阿~比起傳統的寄帳本,這裡有智慧型手機記帳APP,隨身攜帶按按按,馬上無痛記錄生活花費~

以前都是使用自製的表格紀錄,回到家以後才再想今天到底花了錢再哪些項目,有時候也會用個大概來紀錄一下,甚至還會斷斷續續的;某天突然搜尋了這類型的APP因為要做報告,還蠻多種的耶~看來看去有些功能好像很複雜,於是就挑了這款"ahorro"來玩玩,第一眼就被介面吸引住了,看畫面好像蠻簡單的因為其它的看起來都醜醜的,於是就開始試用了,原來它是用西班牙文來命名~名為"節省"的APP…

進入一開始的LOGO是象徵許多人回憶中的存錢撲滿豬~
105743

主選單有4個分群,各人覺得歸類的不錯好像差不多就是這樣了,分別是支出、收入、分析、設定。
105742

– – – – – – – – – – – – – – – 【設定】– – – – – – – – – – – – – – – 
這是整體APP來說,比較比較需要學習的地方設定不是都嘛這樣!?,也是一開始使用APP時的第一步驟,所以先拿出來講…

1.預算編列:設定每月"支出"的預算總金額,預設/通常會選擇顯示預算,但好像只能設定固定預算,沒有在某個月可以多一點預算這回事;固定於支出頁下方。
01

2.帳戶管理:設定現金的來源,再支出頁一律會歸納到支出預算裡(分析頁有BUG?)。個人沒有再開另開帳戶,直接使用現金預算較簡單。

3.貨幣選擇:設定是哪一國的貨幣,我在台灣就選擇新台幣TWD;原本以為他可以自由選擇哪一國貨幣,就會自動幫你算匯率轉換成該國貨幣,結果… Read More

樂啃運動-Android APP介面分析

未命名-1一個運動彩卷賽事相關的APP,為什麼叫樂啃??我也不知道,大概是luckon英文意思延伸,直接用發音來命名??google一下,發現樂啃也在PPT、MOBILE01、WEB上等等出現宣傳足跡,官網一頁呈現主打APP,也能透過FB粉絲頁來關心各種動態訊息,如改版訊息等等,然後發現老闆也有按讚。製作團隊是一群"喜愛運彩"的朋友組成,所以此APP是免費的~該團隊也接受使用者的問題與意見來打造APP,完全無營利真的是對運彩非常有愛~

使用狀況…

87840

-進入APP,一開始先給你個貼心的教學,日後也可以在主選單叫出;主視覺是以LOGO的籃色主色為主,看起來蠻漂亮的,沒有多餘的裝飾。

87841     03

 

 

 

 

 

-目前有棒球、籃球、足球聯盟,樂啃將次要聯盟分群,因而減少了主選單的項目,控制在一個畫面就能看到所有聯盟;在同一分群的聯盟介面上,也簡單只用了1所在類型/聯盟、2內容,各人覺得推擠的效果很棒,可將正在觀看的聯盟名稱固定於上方。
-MLB為預設聯盟,選單以卡片(教學說的)的方式呈現,整體用色不複雜,重點稍微用對比色強調。

小想法:
-主選單圖更清楚辨識類型,但應該可以再弱化一些些。
-被分群的所有聯盟都在同一個頁面,如果賽事較多,內容卡片會拉得很長;各聯盟的用色與卡片很接近,需要更仔細辨識。
-因部分資訊的直接顯示,造成頁面上容納的卡片只有3張,字體也必須縮小。

04     05     06

 

 

 

 

Read More

Gmail / Inbox 使用分析(android版)

【Gmail版本4.9】
進入後是非常簡單的介面,架構上只有導覽列與信件選項;多組帳戶可馬上切換;移除了電腦版很多功能,單純的收發信件與簡單分類。

導覽列:
1.顯示目前類型與帳戶,圖示功能為新郵件、搜尋及更多。
2.新郵件撰寫,可切換帳戶;將非必要的功能收錄在更多。

Read More

mobile 01 APP-基礎使用研究(android版)

今天的主題是mobile01,沒有使用過電腦版,但是稍微比較了一下app版的廣告似乎少了很多;其實個人不常用手機看這一類型的APP,牽涉到文字量非常多的頁面還是會比較習慣PC版。
電腦版討論區功能也都很龐大,在APP取捨該放什麼重點就好,聽說討論的種類多樣,來看看別人家的討論區APP長什麼樣子…

Read More

APP導覽列

Android_APP設計 參考連結

●主要蒐集Android導覽列案例,網站內的設計案例大部分與大家認識的Android系統差不大,也與google的規範相似,左至右依序為…
A.主選單/回上頁(文字/圖)
B.名稱/上頁名稱
C.更多選單/功能

●部分會在導覽加入搜尋/其它主要的功能
案例1. Grand St
案例2. Google Play
案例3. Feedly
02

●少部分有功能按鈕出現於底部,和具獨立的操作模式
案例1. Kwote
案例2. Yahoo! Mail
案例3. Field Trip
案例4. Hubbl
03

其它15個設計案例
另外被推薦的15個設計上,部份也與google的規範相似