顯示具有 用戶體驗 標籤的文章。 顯示所有文章
顯示具有 用戶體驗 標籤的文章。 顯示所有文章

2012年5月30日

瀑布流(Waterfall)排版研究



如果你看過或用過Pinterest這個全球第三大的社交網站,那你一定對瀑布流(WaterFall)排版不陌生,使用這種參差不齊的排版方式來展現源源不絕的產品、圖片是一個非常棒的作法,為什麼呢?

如果你不了解Pinterest,可以參考Inside Harlequin的文章

好處一 : 最大面積的利用螢幕空間 
好處二 : 最大範圍的搜尋

2012年5月17日

養眼網站 | Fab - 創意產品社交交易平台

今晚在科技橘子上的這篇文章中發現了Fab這個社群創意作品交易網站,介面明亮顯眼,我大概在裡面探索了十多分鐘,發現它的使用者體驗做的也不賴,其中還包含了pinterest瀑布流呈現以及許多方便又時尚的介面。

我把一些重點截圖起來大家一起參考學習



















Bundlr - Grid背景效果不錯的網站


內置圖片 1
今天在逛網站的時候無意間發現這個網站
這個網站下方的方格框框的背景效果十分的有FU,看起來就像是有很多資料在裡面
觀察其實作方式並非使用圖片作為背景,而是使用css的旋轉模擬出來的。
後來點擊內中的連結進入這個網站
它的圖片Layout也相當的美觀。

UI Reference & Learning

2012年4月15日

網頁設計流行趨勢





網頁設計流行趨勢

作者:Espen Brunborg   翻譯:雷皓漪

      自從Elliot Jay Stocks 嚴肅地告誡我們應該摒棄web2.0的外觀,我們看到了互聯網的巨大改變。互聯網上不再有那麼多水晶按鈕、斜面的邊緣、反射效果、特價徽章、著色鮮豔而粗糙的斜面、斜線的背景版式等。除了那些光滑設計狂熱愛好者,這種轉變已經被大部分人所接受。可是,如果設計和美學照這樣的非常態發展,不久後在另一個趨勢產生之前,這個網頁設計趨勢便會消失。

流行
      那麼,究竟什麼是當下的流行呢?讓我們一起來看看一些最常見的流行跡象吧。流行不難被發現,因為它們通常需要其他事物共同出現來襯托。(這也就是為什麼傳染會如何高效——當和其他物體結合之後,那些看起來獨立的症狀變得更有傳染性。)

      注意:下面的列表並沒有按特定的順序排列,也不代表影響程度,因為它們看起來都差不多。同時注意以下引用的每個例子包含不只一種流行跡象,因為要把它們嚴格分類幾乎是不可能的。

針線效果
      針線手法的出現,通常是因為設計師太多地注重邊框和線,特別是點狀物的多樣性。從點到破折線的微小轉變就表現了一個完整的針型,加上陰影和其他效果使它又有了3D的效果。
      在網頁設計中使用針形的確切目的只可意會不可言傳,但它在一些特定材質的環境下經常得到使用。比較典型的是在織物皮革材質,或是為了營造真實的顆粒感的情況下。我們很難說出針形效果的靈感是從哪裡來的,但是科學家們相信它的產生是過度使用「Skeuomorphism」的結果。

image002.gif
從左上順時針排列分別為: The Journal of Min Tran; Dribbble shot by Mason Yarnell; Dribbble shot by Liam McCabe.  
本文單純分享,摘錄視覺中國網站,如果要更詳細的文章請觀看原文章 http://c.chinavisual.com/2012/04/09/c81551/index.shtml



2012年4月5日

產品圖示規範化的意義與過程




產品圖示規範化的意義與過程

一、問題引發思考


現在隨著互聯網企業的發展與業務的拓展,隨著時間的推移,一個公司的產品可能將越來越豐富多樣,同樣每一個產品隨不斷的功能完善和擴展,隨著一個產品的「長大」產品內所需要用到的圖標也必然會越來越多,這時候眾多產品形象的呈現、產品內圖標等視覺原素的表現,如何能與整個產品或公司的戰略計劃相適應,這時候在圖形語言的視覺呈現,語義表達、識別性等層面就需要作一個全面細緻的考慮了。
我們來看幾個典型的例子,回顧一下 Adobe 產品系列的成長過程, 從2005年 Adobe 收購了原最大的競爭對手Macromedia公司後,它的產品線得到了極大豐富, 而後在2002年Adobe確立了 Creative Suite概念後,後續的新產品持續推出,龐大的產品線以一種什麼樣的展現方式呈現在用戶面前便成為了一項非常重要的課題。下圖中我大致的列了一下Adobe產品logo的一個進化轉變過程:
產品陣容強大的Adobe帝國在CreativeSuite 3發佈的時候為旗下全部產品Logo進行一個色環劃分圖,很好的呈現出各產品logo的色彩關係和一個完整的用色體系。

我們再看一個例子,Apple公司在2010年和2011年先後將itunes與App store的Logo作出了比較重大的調整,到Max OS Lion版本時,兩大平台級的產品新形象同時展現在用戶Mac的Dock上。雖無準確的官方答案,但從一個是整個Apple產品資源應用來源和一個是娛樂內容來源的的兩個具有類似性質的商業平台產品來看,它們顯然是被Apple寄予相當大期望,在感觀上看來,它們在被賦予更厚重、大氣的形象這一改變,能夠很好的服務於其公司的商業戰略。
另外itunes 10的發布後側欄的圖標全部變成了單色,這一變化我認為是為了突出Store的資源核心區域,強調產品的平台性,和上述的分析一樣,這個視覺表現層面的調整同樣是為了整個產品的資源商業戰略服務的。
那現在回到我們自己的產品,現在「我的阿里」作為一個網商用戶的得力助手,用戶的家,「我的阿里」內容與應用在日益的增長,系統越來越龐大,同樣網站的視覺的圖形語言的整理,解決原來積累已久的視覺表現「亂象」也日益的緊迫。
在「我的阿里」視覺元素整理的第一步,眾多應用圖標是頭一個切入點,我們從圖標的含義,分類,尺寸規格、設計規則,風格表現等幾個方面進行一個整體方向的規劃,總結一套設計指南。
如果你想要查看更多的細節與內容,請至原文出處查看 本文章簡短節錄於 - 有一點 - 阿里巴巴交互設計部 原文網址 : http://www.aliued.cn/2012/03/05/%E4%BA%A7%E5%93%81%E4%B8%AD%E5%9B%BE%E5%BD%A2%E8%AF%AD%E8%A8%80%E8%A7%84%E8%8C%83%E5%8C%96%E6%84%8F%E4%B9%89%E4%B8%8E%E8%BF%87%E7%A8%8B.htm



2012年4月3日

用戶界面設計中「狀態」和「動作」的表達




用戶界面設計中「狀態」和「動作」的表達

簡介

一、問題引發思考
前陣子與同事探討一個小需求時又遇到了按鈕表示「動作」和表示「狀態」間矛盾問題。想想這個問題多年前已經開始討論了,所以在此整理一下思路,與大家共享。
taobao1
具體案例是這樣的:如上圖所示,在「啟用」和「停用」搜索定製功能時,這個按鈕到底是表示「狀態」還是表示「動作」呢?簡單的說,上圖中 1表示當前是停用狀態,還是表示點擊後為停用操作呢?答案顯然是不清晰的。
怎樣能夠清晰的表達兩者的差異,減少用戶的誤解呢?我們首先要從「動作」、「狀態」的定義和兩者的關係入手。
二、什麼是動作,什麼是狀態
動作是指具有一定動機和目的並指向一定對象的運動。
狀態指人或事物表現出來的形態。
結合來講,動作是促使人或事物改變某一狀態的運動,而狀態是動作造成的結果表現。因此兩者經常是緊密關聯的,有時甚至是互為條件的。
比如「操作收音機」這件事,我需要扭動旋鈕或按鍵等「打開」的動作來打開收音機,當動作完成後收音機的狀態是「打開的」。而「關閉」收音機這個動作的前提,是一個「打開的」狀態的收音機。
」聽起來好複雜阿!「很多人都會這麼認為。為什麼我們在生活中天天面對類似的事卻很少有這樣的感覺呢?

下面來看看生活中的例子我們或許就能理解了。
三、生活中的例子
1、電燈開關


kaiguan1
如果你想要查看更多的細節與內容,請至原文出處查看 本文章簡短節錄於 - 有一點 - 阿里巴巴交互設計部 原文網址 : http://www.aliued.cn/2010/11/07/expression-of-state-and-action-in-ui-design.html

ShareThis