2015-1-7 藍藍設計的小編
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務.
每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源:http://www.woshipm.com/pd/735.html
如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里
大部分的用戶都并非對體驗與設計有深入研究,而是從“看著舒服、用著好用”的角度來衡量一款產(chǎn)品,據(jù)筆者觀察一些網(wǎng)頁設計與數(shù)碼設計,發(fā)現(xiàn)兩者之間有著異曲同工之妙,他們對用戶的研究、設計發(fā)展趨勢幾乎是共通的,例如蘋果著名的COVERFLOW,和網(wǎng)站設計首頁焦點圖展示的效果。因此,我們常提的CROSSOVER思維可以用上了,互聯(lián)網(wǎng)與傳統(tǒng)數(shù)碼的視覺設計與交互體驗可互為靈感參考。
前言
為什么藍魔的設計感覺“山寨”,而蘋果的設計卻被無數(shù)人追捧為“藝術品”?
為什么很多國產(chǎn)品牌模仿國際品牌,作品仍然缺乏吸引力?
筆者認為,很大的原因是因為他們都缺少自己的設計理念。好的設計應該有自己的理念,如QQ概念版的設計理念是“生命力空間感時間感”,所有的設計都應該圍繞理念進行,所有的模仿都應該建立在理念基礎上,這是設計的靈魂。蘋果的理念是簡約質感;Google是技術派,看似簡單卻有對用戶行為深刻的理解;索愛手機的UI追求精致時尚;韓系品牌大都走柔和可愛風。好的品牌都有自己的獨有風格和深入理解,不管如何模仿借鑒,精髓仍在。
關鍵詞一:圓角陰影高光
圓角、陰影、高光廣泛應用于蘋果產(chǎn)品設計和互聯(lián)網(wǎng)設計中,這三種元素的加入,可以增加圖標的“質感”。
仔細觀察一下IPAD的圖標,是否很明顯的體現(xiàn)了這三種設計元素?圓角處理,月牙型的高光像從上而下打光,字體上淡灰色的陰影(是為了防止白色字體在白色背景上看不清楚,蘋果考慮很細致)。不僅是產(chǎn)品,蘋果的LOGO設計都沒有脫離這三種元素。
我們再看看Google的chrome瀏覽器,圓角、陰影、高光的效果仍在(圖標圓角處理、圖標邊緣陰影以突出立體感、鼠標移至某一圖標時的高光效果)。
關鍵詞二:空間感
空間感并非一個空泛的概念,而是處處體現(xiàn)在設計中。它的一個典型表現(xiàn)方式,就是打破平面感,用立體與三維方式來展現(xiàn)??臻g感的設計一是可以增加炫酷和華麗,二是可以用于凸顯重要內容。
空間感的典型運用之一:蘋果cover flow專輯封面展現(xiàn)方式
空間感運用于網(wǎng)站設計上,OPPO官網(wǎng)改版時焦點圖類似cover flow效果。
有了空間感的思維之后,發(fā)現(xiàn)常規(guī)的設計可以有非常多的突破!那就是,把每一個界面都想象成一個實實在在的物體,任我們翻轉把玩!例如打破常規(guī)的圖片展示,我們可以把圖片翻過來,在背面寫備注;使用多點觸摸把圖片抓到疊在一起;用便簽紙的立體形式展示備忘錄,隨意貼在桌面的任何地方等等。
關鍵詞三:半透明
半透明的設計元素是個人的一個偏好,尤其當用于菜單與邊框設計時,半透明可增加靈動、深邃和通透感,別有風韻!另外,半透明也可用于當一些菜單彈出,卻不想擋住背景,可把菜單設計成半透明的感覺,既美觀又不干擾視覺。
仔細觀察一下IPAD的設計,很多地方都用了半透明的元素,包括首先進入時“移動滑塊來解鎖”的界面邊框,以及進入后的主界面邊框。
半透明元素在網(wǎng)站設計中也廣泛沿用,比如著名的twitter。
另一個用到半透明元素的網(wǎng)站。
關鍵詞四:擬物化生命力
提起擬物化,大家首先想到的肯定是IPAD的IBOOKS書本表現(xiàn)方式,如同真書般惟妙惟肖,也贏得了很多用戶的口碑。擬物化使用好了,可以增加親切感,減少數(shù)碼產(chǎn)品的冰冷感,因為用戶對生活中的事物才是最熟悉的。同時,擬物化的使用,往往可以在第一眼打動用戶,就是我們俗稱的“驚艷”。
微軟courier的擬物化,讓數(shù)碼脫離了機器冰冷的感覺。
除了IBOOKS之外,三星P3里的小插件,飛舞的蝴蝶、散落花瓣的花朵、餅干人、電燈調節(jié)亮度等,其實也是試圖通過生活中的事物,來增加用戶的好感。
在網(wǎng)站設計中,也不難發(fā)現(xiàn)一些生命力的元素,如twitter的小鳥,可愛生動。
關鍵詞五:動態(tài)效果
很難想象如果沒有動態(tài)效果的使用,設計將會變成怎樣。動態(tài)效果將會讓設計更加絢麗、好玩、生動。
仔細觀察一下蘋果,我深深被它界面過渡的動態(tài)效果所吸引,華麗又不失自然。例如照片刪除時唰的回到垃圾桶的效果,還有書本翻頁的過渡效果。
灰常多人都在玩的植物大戰(zhàn)僵尸,每種下一棵植物,它都會輕輕搖擺,是不是很可愛呢?這也是一種動態(tài)效果。
我承認喜歡索愛的原因就是因為它的UI符合我的胃口。除了圖標設計精致之外,圖標周圍有動態(tài)變幻的小元素,就像跳舞的精靈。
很多網(wǎng)站也用動態(tài)效果來表現(xiàn),如菜單在鼠標移上去時的動作反饋,不僅絢麗動感,也是給用戶操作信心。
關鍵詞六:擬物音效
這里需要再提一下植物大戰(zhàn)僵尸,仔細觀察這個游戲,會發(fā)現(xiàn)它也閃耀著智慧的光芒,從視覺設計的生動感、每個植物與僵尸角色的設計、情節(jié)布局的環(huán)環(huán)相扣、甚至是音效的配合都有很多值得學習的地方。
植物大戰(zhàn)僵尸中大量使用了擬物音效,種植物時與草地摩擦的聲音、子彈打到僵尸身上的響聲、僵尸來臨時的恐怖音效、腦子被吃掉時的哀嚎。擬物音效讓這個游戲更加生動,不會蒼白平淡。
再觀察一下IPAD,翻閱圖書時紙張的摩擦聲、翻閱報紙時報紙的摩擦聲,這個小細節(jié)讓我感覺很興奮。更加認定這個品牌是在用心做產(chǎn)品。
音效的使用可以讓用戶更有身臨其境的感覺,尤其是模擬真實的音效。
以上是這幾天的不完全觀察,IPAD設計值得學習的地方還有很多,例如提示與暗示的巧妙使用、皮套的貼心設計等。筆者認為IPAD作為電腦的補充,是非常成功的一款產(chǎn)品(平板電腦完全替代電腦是不可能的)。至少,蘋果在如今傳統(tǒng)數(shù)碼新品類發(fā)展的瓶頸時期,開拓了符合人類使用習慣的新思路,單從這點值得很多中國品牌學習。
掃一掃,案例分享帶回家(藍藍設計微信公眾平臺)