• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】回歸體驗之我喜歡網設計小結




    回歸體驗之我喜歡網設計小結

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自站酷的設計理論類文章,寫教學的作者是360UXC,感謝360UXC提供設計理論的實作教學。

    教學大綱:

    富媒體內容豐富的web時代,互聯網已經是獲取內容和收集內容的一個必然途徑。通過圖片、文章等等…的內容資源,如何能實現更好的收集與分享將變的更加重要。


    設計理論教學開始

    富媒體內容豐富的web時代,互聯網已經是獲取內容和收集內容的一個必然途徑。通過圖片、文章等等…的內容資源,如何能實現更好的收集與分享將變的更加重要。在每一位UGC用戶貢獻內容的同時,他們也在相互消費着其他的用戶內容,基於興趣內容的互動就這樣產生了。依託於碎片化的內容收集,可以清晰的看到到我們的興趣圖譜。讓豐富的興趣內容吸引更多的相關用戶,使發現好內容、發現興趣相投用戶變的更簡單。作為一個以瀏覽器為基礎延伸出的創新產品,基於web用戶瀏覽收藏網頁內容的強需求,我喜歡網通過與瀏覽器的深度結合,努力為用戶提供更有價值的互聯網服務。創新和探索正在使得這個產品不斷趨於完善,很多功能和體驗都需要進一步的優化。努力為億萬用戶提供最好的web體驗是我們的責任。

    在接觸我喜歡項目的這段時間裡,從自身使用、數據分析以及用戶反饋中總結了一些設計中的感悟,在這裡我們一起聊聊如何在設計上優化產品體驗。

    一、新視覺形象Logo設計:

    我喜歡-基於興趣的內容分享社區,通過融合網站核心功能,以及極富情感化色彩的網站名稱“我喜歡”,設計了更符合產品定位的Logo視覺形象。

    回歸體驗之我喜歡網設計小結

    新Logo緊緊圍繞用戶互動行為(核心功能點 – 收集),以及帶有強烈情感導向的網站名稱“我喜歡”為設計思路,將抽象的用戶行為和情感因素具象化。以詮釋收集行為的回形針與情感化表述的心形icon做為設計元素相結合,設計了這版心形回形針的logo。在整體的造型上 又做了一些規範化的處理,以適合不同環境下的標準化應用。

    二、ICON風格統一化:

    回歸體驗之我喜歡網設計小結

    通過在logo上的延展,設計了風格相符的icon,不僅在視覺元素風格上達到高度統一,也提升了品牌形象感。

    三、主導航優化:

    在之前的版本中,導航冗餘信息太多,頻道名稱相對較長。對於我喜歡網這樣的一個響應式網站,在不同分辨率下頁面寬度是自動適應的,這樣就會產生導航在小分辨率下的顯示效果極為臃腫。

    在多次的調整和嘗試中,最終決定使用如下版本。介於網站展示內容以圖片為主,深色導航更能夠壓住頁面內容,同時logo的形象的展示會更充分。新的導航採用了吸頂式設計,將分類選擇融入到導航中,在頁面瀏覽的任何時候都可以做快速切換,優化了網站瀏覽體驗。

    回歸體驗之我喜歡網設計小結

    四、瀏覽器擴展程序優化:

    在這一版的改進中,我們在圍繞功能點優化的同時提升了用戶體驗。優化的內容如下:

    收集內容在插件中實時預覽查看;

    回歸體驗之我喜歡網設計小結

    興趣電台“隨便翻翻“ ,在這裡可以發現更多精彩內容,你也可以點按“收集icon”隨手收集起來,稍後查看。

    回歸體驗之我喜歡網設計小結

    回歸體驗之我喜歡網設計小結

    興趣頻道也讓這個擴展程序變的更有活力與情境,伴有一絲的意外與驚喜。讓原本生硬的內容推薦變的更有情調,更易於接受。

    整個擴展程序面板在視覺上做了較大的優化。系統化的梳理了面板交互結構,調整了tab視覺樣式、icon風格統一化調整,以及圖片展示和交互效果。

    小結:

    回歸體驗之我喜歡網設計小結

    回歸體驗之我喜歡網設計小結

    在整個項目的設計的過程中做了很多細節上的微調整,有些時候必須一像素一像素的比對調整,提高內容的可讀性。對於瀑布流上每個版塊之間的間距,先適當放大,再去測試,不合適再一點點的縮小,去一次次的尋找最佳的間距尺寸。這樣做一方面使頁面更整體有序,同時也增強了內容的可讀性。設計上哪怕一個微小的變化都可能會帶來一些預想不到的影響。有時候真正的挑戰不是修正你發現的問題,而是修正這些問題的同時不破壞已經正常運行的部分。用戶體驗的改善不僅僅是交互上的易用、視覺上的美觀,產品本身的可用性是構建上層建築的基礎,基礎體驗的優化是不容忽視的。後續的優化仍在繼續中….

    — —

    文章永久連結為: 回歸體驗之我喜歡網設計小結