討論區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-輕鬆記帳,簡單理財-ios APP介面分析

ahorro是由產品人因工程中心開發的APP,目前在APP store上獲得4分以上的評價。

介面採用扁平風格,捨棄仿真光影、材質與漸層的表現手法,簡化裝飾細節,設計者不需再費心雕琢擬真風格(skeuomorphism)的介面。但精簡同時衍生新的考驗,畫面上每個元素都會受到更嚴格檢視,處理得好是簡潔,處理不好就是陽春了。 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