IECOSYST WEBSITE

i室設圈｜漂亮家居：室內設計智庫，打造互動式交流體驗

《i室設圈｜漂亮家居》為台灣知名知識平台，專注於為室內設計領域相關從業者提供涵蓋新聞、人物、職涯、案例資料庫等資訊，並展示不同坪數與風格的豐富作品，協助設計師發想靈感、參考學習。

本次網頁設計專案，由於案例資料筆數龐大，Transform Design 面對分類多元、功能複雜等艱鉅挑戰，特別針對用戶體驗下足功夫。例如：打造可互動的室內平面圖（前後對比平面圖、自訂定位點室內圖），強化UI、UX設計等，是這次前台頁面的規劃重點。

Client

i室設圈｜漂亮家居
iecosyst
Year

Feb 2023
Services

Website Design & Build
Website Strategy
Wireframe & User Flow
Prototyping

Related Work

iecosyst Brand Identity
Visit Site

Official Website

網站UI設計

■ 首頁：設計風格延續《i室設圈》的新版封面，配合大圖輪播，呈現簡潔俐落的調性；左側顯示網頁的架構列表，右側為功能項目，中央的主頁面部分則以白色作為背景，使用大塊橫條與直式標誌相互組合編排。

■ 選單：採用滿版佈局，以《i室設圈》的雜誌目錄為設計方向，提升可讀性、減少畫面干擾。

字體設計

■ 主要字體 Sentient：強調人文氣質，源於書法的襯線字體，作為網頁標題使用，為排版帶來層次感與變化。

■ 輔助字體 Nunito Sans：富有親和力的現代風格字體，筆劃柔和，轉角圓滑，作為內文、分類小字使用，同時也是《i室設圈》的雜誌主要字體。

網頁UX設計

■ 搜尋功能：為解決資料筆數龐大的問題，重新強化了全站搜尋功能，可切換分類。
■ 文章索引：因應現代人網路使用習慣，為手機裝置設計更符合閱讀體驗的索引形式。
■ 文章、資料庫列表：增加了置頂文章的版面規劃，優化關鍵內容曝光度，降低混亂感。

互動式資訊設計

一般而言，在介紹室內設計案例時，受限於媒體形式，常常會有內容傳達不夠清楚，或是難以直觀地比較設計前、後變化的資訊呈現問題。

為了解決這些問題，本次 Transform Design 打造互動式閱讀體驗，將原有的室內平面圖結合定位點功能，讓用戶能夠搭配文章內容，並快速切換前後對比圖，用更輕鬆的方式了解案例的改造重點與設計概要，提升清晰度與便捷性。