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

【討論區APP UI設計概念】

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

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

【發文/回文】

01

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

02

(左圖)
-ㄧ鍵下拉聯盟與分類選單。可能要考慮選完分類後就自動回到發文頁,或新增確認按鈕。
(中圖)
-聯盟選單的視覺層次感,與常駐的提示文字。
(右圖)
-聯盟選擇方式一致。

03

(左圖)
-以聯盟取代抬頭,再簡化的回文頁面。
(中圖)
-文章內容與回文頁面的層次,再選擇回文之後,直接向上彈出回文頁面。
(右圖)
-用圓外表示回文的層次。

【登入/註冊】

04

(左圖)
-取消登入以外的按鈕樣式。
(中圖)
-將註冊、忘記密碼移至對應的欄位後方。
(右圖)
-登入按鈕感應區其實只在文字那個區塊;下方空白處未來可擴充,用什麼管道登入的圖示。

05

(左圖)
-左切齊左,右切齊右會不會看起來比較整齊?
(中圖)
-一列兩欄樣式,在輸入中,標題與提示訊息位子互換。
(右圖)
-為了排列可以將驗證文字改成3位數?或與兩個字元同寬的符號。

【手機認證/連絡我們】

06

07

(左圖)
-與原來流程相同,再弱化圖示與按鈕。
(中圖)
-將步驟ㄧ頁呈現,執行中的步驟才可操作。
(右圖)
-圓的層次加上左右彈出步驟。或許兩個層次會比較不複雜。

08

【連線中斷】

09

(左圖)
-科技、機械質感。
(中圖)
-趣味性圖片。
(右圖)
-按下重試之後,或許可以跳個"歡迎回來"等成功連線的用語。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *