PortfolioUIUX Design

Game Interface APP

UIUX

專案介紹

LOGO 重新製作

此 LOGO 根據舊版 LOGO 進行調整,以呼應「全新版本」的順付形象。設計的核心目的是配合全新 UI 設計,賦予品牌嶄新的視覺風貌,同時調整為更符合新版本 UI 的配色方案。整體方向著重於細節的提升,展現精緻感與現代科技化的設計語言。

APP 啟動畫面動畫

以『極速智能、星移電掣』為概念
品牌 LOGO 動畫的設計目的是「強化品牌印象」,類似許多遊戲和電影中的 LOGO,它們通常會配合專屬動畫來加深觀眾的記憶點。關於音效使用的建議如下:

  • 遊戲 APP:由於使用者對遊戲的音效有心理預期,認為音效是遊戲體驗的一部分,因此在動畫中加入音效是合理且可接受的。
  • 順付 APP:由於順付屬於支付、轉移點數為遊戲幣類型,使用者通常不預期有音效。在使用環境如工作或聆聽音樂時,突如其來的聲音可能會打斷使用者的專注,甚至導致立即關閉 APP。因此,建議 LOGO 動畫無音效,專注於視覺效果。


動畫設計概念:
LOGO 動畫採用「極速智能、星移電掣」的設計概念,通過流暢的動態與科技元素,彰顯品牌的現代感與高效能。

LOGO 品牌動畫 - 宣傳影片使用

3D 主視覺設計

使用 3D 技術製作主視覺能帶來許多優勢,首先,3D 設計能夠提供更強烈的立體感和深度感,讓視覺效果更加生動、吸引注意力。相比於傳統的 2D 設計,3D 圖像能展現更多細節,提升整體視覺的層次感與質感,進一步強化品牌形象的高端與現代感。此外,3D 設計更具互動性,能夠與使用者進行更靈活的互動體驗,讓用戶在視覺上留下深刻印象,增強品牌識別度。透過 3D 技術,主視覺不僅能提升產品的吸引力,還能在競爭激烈的市場中脫穎而出,為品牌塑造獨特且具未來感的視覺語言。

Guideline 樣式指南

制定設計規範(Guideline)對品牌和產品發展至關重要。它能確保設計元素的一致性,無論是視覺風格、色彩、字體還是排版,都能在不同平台和渠道中保持統一,提升品牌辨識度。同時,設計規範為設計師、開發者及行銷團隊提供清晰指引,有助於簡化流程、避免錯誤,提高工作效率。此外,設計規範為品牌的未來擴展或調整提供穩定基礎,避免因時間或人員變動而導致品牌形象不一致。最終,規範的實施有助於建立專業且值得信賴的品牌形象,確保消費者每次接觸品牌都能享有一致且高品質的體驗。
註記:Guideline 為團隊組員 jerome 為主要任務執行者,其他組員共同維護。

UI Kit 使用者介面套件

使用 UI Kit 是提升設計效率與一致性的最佳工具。它提供預先設計好的元件和樣式,讓設計師能快速建立原型,縮短開發時間。同時,UI Kit 確保設計在不同頁面和平台間保持統一,強化用戶體驗,並降低設計錯誤的風險。無論是初創團隊還是大型企業,UI Kit 都能為設計流程帶來規範化和高效性,讓團隊專注於創造更具創意和價值的設計解決方案。
註記:UI Kit 為團隊組員 jerome 為主要任務執行者,其他組員共同維護。

介紹頁面動畫

僅於第一次開啟 APP 展示
在 APP 的 UI/UX 設計中,首次打開時以動畫形式呈現介紹頁面,是提升用戶初體驗的有效方式。這類動畫不僅能吸引注意,還能營造流暢、現代且專業的視覺效果,讓用戶對 APP 的印象更加深刻。同時,動畫能更生動地展示核心功能與特色,幫助用戶快速了解產品價值,縮短學習曲線。透過動態呈現,介紹頁面能增強用戶的參與感,並在進入應用前建立對品牌的好感與期待感。這樣的設計不僅提升了用戶的留存率與使用率,還為整體產品增添了吸引力與競爭優勢。

功能指引

僅於第一次開啟 APP 展示
在 APP 的 UI/UX 設計中,功能指引介紹是提升用戶體驗的關鍵,特別是針對首次使用的用戶。這類指引能直觀展示核心功能與操作流程,幫助用戶快速上手,減少學習曲線,避免因操作不熟悉而產生困惑或放棄使用。透過清晰且簡潔的設計,用戶能在短時間內理解 APP 的價值,並熟練應用各項功能。 同時,功能指引還能增加用戶對產品的信任感,讓 APP 更顯友好與易用性。這不僅能提升用戶滿意度與留存率,還能強化品牌形象,彰顯對細節的專注與專業水準。

其他頁面

在登錄或註冊過程中,我們特別加入了「觸控震動」和「交互動畫」,提升操作的回饋感與互動體驗。此外,為了保障用戶隱私,產品增設了「安全密碼」功能。每當需要查看帳戶或個人資料時,用戶需輸入「安全密碼」或啟用生物辨識功能(如 Face ID 或 Touch ID),以確保資料安全。
 • 建議使用手機掃碼,操作『原型』實際體驗(置於底部)
註記:右方兩頁設計稿為設計過程,非客戶過審之設計稿。

內嵌可操作交互原型

建議使用手機下載 ProtoPie 並掃描原型 QR Code 可更直觀『觸控體驗』交互原型。下方仍有『內嵌』的原型頁面,也可使用滑鼠進行操作。

小提示:使用 ProtoPie APP 時,如需顯示操作選單:
  • 搖晃手機,即可喚出選單。
  • 或用兩隻手指輕敲螢幕兩次。(此功能可於設定中關閉)
手機無法觀看,請直接掃描提供之 QR Core 由手機體驗更直觀。或者點擊上方 QR Core

其他專案