iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
2
Modern Web

PM 觀點 - 30 天 redesign 心目中的 LINE系列 第 20

【Day20】redesign 心目中的 LINE (1):移除主頁+增加群組分類功能(內有基本設計原則與線稿 wireframe )

  • 分享至 

  • xImage
  •  

歡迎追蹤,一起在 30 天完成心目中的 LINE redesign

在專案與產品的進行中,尊重同仁不同職能的專業、遇到問題坦誠溝通,都算是基本配備~而為了讓整個團隊能在同一個思考頻率,我們還會規範一些基本的設計、開發、團隊協作、版控等相關原則。

在產品設計原則之中,還會分為產品面、設計面、市場面、執行面等不同面向要注意的地方,其中,呼應今日要談的內容,擷取針對「設計面」要遵循的原則的內容如下:

設計面

  • 了解設計思考與互動原理
  • 遵守 UI/UX 設計原則
  • 與真實世界建立關聯
  • 了解真實使用者的需求
  • 了解無障礙設計原則(包括:顏色對比、可用、易用、可預期(一致性/慣性)、可感知)
  • 關注 O2O 使用者體驗(減少認知負擔,為習慣而設計,適時增加小驚喜 - Don't make user think & give aha moment,維持用戶優越感)
  • 適度跳脫框架
  • 解決真實的問題

我自己在規劃服務或體驗時,都是會依照上述原則進行思考~

話說~~為了能如期完成鐵人賽並確保不影響原有工作與專案 XDD,因此調整,鐵人賽最後的產出是 wireframe 而不是 prototype 哦~~以能溝通設計理念與流程為主!當然,也很歡迎其他有志之士協助實現 UI......雖說,在工程師的社群徵求 UI 設計師好像有點為難呵呵

移除「主頁」及重構「聊天」列表頁

註:點此可回顧 LINE 現況畫面流 C 端使用者的使用行為使用者的建議

首先呢,在整理相關資訊後,初步將底部導覽選單分為:

  1. 聊天
  2. 逛逛(替換原主頁內容)➜ 後續會有線稿與說明
  3. 新鮮事(原貼文串)➜ 後續會有線稿與說明
  4. Today(不變)
  5. 錢包(暫時不變)

在頁面流程與功能上,也有做一些異動,依優先順序說明如下~~

  • 一打開 LINE,會直接抵達「聊天」頁
    符合 LINE 作為通訊軟體的本質,並保留原有廣告版位,兼顧商業營運的需求

  • 移除「主頁」,並將原有資訊重構至聊天的「通訊錄」與「逛逛」頁面
    其中,這樣的設計方式,是為了解決主頁定位尚不明確之議題,並更清楚展示 LINE 生態系的多元服務。逛逛聽起來比較像是隨意看看(window shopping),不會有那麼重的商業元素,也可讓想逛的使用者再來逛~

  • 使用者可將群組與通訊錄進行分類,並可自訂分類名稱
    使用者在手機長按、或在 PC 點擊右鍵,就可以將群組與通訊錄進行分類,更貼近不同使用目的與需求,並提供更方便的資訊查找方式。訪問周邊友人,大家都覺得蠻需要這個功能的~~例如,可以將聊天室分為家人、工作或是內容通常與我無關、但不好意思退出的聊天室 XDD

  • 將頁面標題置中,並於標題左右兩邊顯示相關快捷功能鈕
    標題左側有漢堡選單,點擊後就可以開啟個人設定的頁面(這也是原本點擊齒輪 icon 會出現的頁面)。此外,為了增加「聊天頁」的可用空間,這邊還有將原本主頁會顯示的「帳號持有人的大頭照與名稱」的介面移到此頁面~

標題右側則是有新增「通訊錄」頁面之外,還有保留原有的「加入好友」。其中,點擊通訊錄就可以查找所有的好友,除了可以查看好友的個人資料、動態,還可直接選擇要撥打語音通話、傳送訊息或查看歷史通話紀錄,還同樣可以將通訊錄的好友進行類別分類(分類新增與設定方式同群組的分類流程~)

  • 其他:將 keep 更名為 MyBox(個人雲端空間)
    目前是想~如果 keep 功能發展起來的話,有可能會進階成為檔案空間管理等收費服務。因此,為了能讓使用者可以從服務名稱更直覺連想到服務內容,並吸引使用者注意,規劃將 MyBox 作為浮動按鈕,固定顯示在聊天列表頁的最下方

大家喜歡這樣子的 LINE 嗎~~?

不知道其他設計師畫線稿時是什麼的感覺呢?我自己的話,是還蠻享受規劃服務與畫線稿的過程,在畫圖的過程,能夠幫助梳理思路、沈澱心情,蠻好玩的!

今天就先到這邊囉!


謝謝你的瀏覽。如果你喜歡我的文章,歡迎點擊追蹤或訂閱接收更新通知,一起體驗 30 天完成心目中的 LINE redesign(剩最後 10 天了!)如果有任何指點與建議,也歡迎留言交流,一起激盪更好的優化與創意。

我們明天見:)


上一篇
【Day19】從商業思維、市場分析到使用者體驗,回顧這次 redesign 心目中的 LINE 的前置作業與重點
下一篇
【Day21】redesign 心目中的 LINE (2):重構聊天室內頁(內有線稿 wireframe )
系列文
PM 觀點 - 30 天 redesign 心目中的 LINE30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
dongon
iT邦新手 5 級 ‧ 2020-10-03 23:55:23

直接抵達聊天室是好設計。
昨天有提到演算法,也期待如何提供演算法的思考,優化貼文串和探索。

Rafeni iT邦新手 5 級 ‧ 2020-10-04 22:51:12 檢舉

我自己也蠻期待那塊的~~可以明顯感覺得出 LINE 想做社群,不過這條路真的不容易~過兩天來談談 !/images/emoticon/emoticon61.gif

我要留言

立即登入留言