蘋果iPad視覺設計分析

2022-03-09 13:48:04 字數 3110 閱讀 8654

大部分的使用者都並非對體驗與設計有深入研究,而是從「看著舒服、用著好用」的角度來衡量一款產品,據筆者觀察一些網頁設計與數碼設計,發現兩者之間有著異曲同工之妙,他們對使用者的研究、設計發展趨勢幾乎是共通的,例如蘋果著名的coverflow,和**設計首頁焦點圖展示的效果。因此,我們常提的crossover思維可以用上了,網際網路與傳統數碼的視覺設計與互動體驗可互為靈感參考。

前言

為什麼藍魔的設計感覺「山寨」,而蘋果的設計卻被無數人追捧為「藝術品」?

為什麼很多國產品牌模仿國際品牌,作品仍然缺乏吸引力?

筆者認為,很大的原因是因為他們都缺少自己的設計理念。好的設計應該有自己的理念,如qq概念版的設計理念是「生命力空間感時間感」,所有的設計都應該圍繞理念進行,所有的模仿都應該建立在理念基礎上,這是設計的靈魂。蘋果的理念是簡約質感;google是技術派,看似簡單卻有對使用者行為深刻的理解;索愛手機的ui追求精緻時尚;韓系品牌大都走柔和可愛風。好的品牌都有自己的獨有風格和深入理解,不管如何模仿借鑑,精髓仍在。

圓角、陰影、高光廣泛應用於蘋果產品設計和網際網路設計中,這三種元素的加入,可以增加圖示的「質感」。

仔細觀察一下ipad的圖示,是否很明顯的體現了這三種設計元素?圓角處理,月牙型的高光像從上而下打光,字型上淡灰色的陰影(是為了防止白色字型在白色背景上看不清楚,蘋果考慮很細緻)。不僅是產品,蘋果的logo設計都沒有脫離這三種元素。

我們再看看google的chrome瀏覽器,圓角、陰影、高光的效果仍在(圖示圓角處理、圖示邊緣陰影以突出立體感、滑鼠移至某一圖示時的高光效果)。

空間感並非乙個空泛的概念,而是處處體現在設計中。它的乙個典型表現方式,就是打破平面感,用立體與三維方式來展現。空間感的設計一是可以增加炫酷和華麗,二是可以用於凸顯重要內容。

空間感的典型運用之一:蘋果cover flow**封面展現方式

空間感運用於**設計上,oppo官網改版時焦點圖類似cover flow效果。

有了空間感的思維之後,發現常規的設計可以有非常多的突破!那就是,把每乙個介面都想象成乙個實實在在的物體,任我們翻轉把玩!例如打破常規的展示,我們可以把翻過來,在背面寫備註;使用多點觸控把抓到疊在一起;用便簽紙的立體形式展示備忘錄,隨意貼在桌面的任何地方等等。

半透明的設計元素是個人的乙個偏好,尤其當用於選單與邊框設計時,半透明可增加靈動、深邃和通透感,別有風韻!另外,半透明也可用於當一些選單彈出,卻不想擋住背景,可把選單設計成半透明的感覺,既美觀又不干擾視覺。

仔細觀察一下ipad的設計,很多地方都用了半透明的元素,包括首先進入時「移動滑塊來解鎖」的介面邊框,以及進入後的主介面邊框。

半透明元素在**設計中也廣泛沿用,比如著名的twitter。

另乙個用到半透明元素的**。

提起擬物化,大家首先想到的肯定是ipad的ibooks書本表現方式,如同真書般惟妙惟肖,也贏得了很多使用者的口碑。擬物化使用好了,可以增加親切感,減少數碼產品的冰冷感,因為使用者對生活中的事物才是最熟悉的。同時,擬物化的使用,往往可以在第一眼打動使用者,就是我們俗稱的「驚豔」。

微軟courier的擬物化,讓數碼脫離了機器冰冷的感覺。

除了ibooks之外,三星p3裡的小外掛程式,飛舞的蝴蝶、散落花瓣的花朵、餅乾人、電燈調節亮度等,其實也是試圖通過生活中的事物,來增加使用者的好感。

在**設計中,也不難發現一些生命力的元素,如twitter的小鳥,可愛生動。

很難想象如果沒有動態效果的使用,設計將會變成怎樣。動態效果將會讓設計更加絢麗、好玩、生動。

仔細觀察一下蘋果,我深深被它介面過渡的動態效果所吸引,華麗又不失自然。例如**刪除時唰的回到垃圾桶的效果,還有書本翻頁的過渡效果。

灰常多人都在玩的植物大戰殭屍,每種下一棵植物,它都會輕輕搖擺,是不是很可愛呢?這也是一種動態效果。

我承認喜歡索愛的原因就是因為它的ui符合我的胃口。除了圖示設計精緻之外,圖示周圍有動態變幻的小元素,就像跳舞的精靈。

很多**也用動態效果來表現,如選單在滑鼠移上去時的動作反饋,不僅絢麗動感,也是給使用者操作信心。

這裡需要再提一下植物大戰殭屍,仔細觀察這個遊戲,會發現它也閃耀著智慧型的光芒,從視覺設計的生動感、每個植物與殭屍角色的設計、情節布局的環環相扣、甚至是音效的配合都有很多值得學習的地方。

植物大戰殭屍中大量使用了擬物音效,種植物時與草地摩擦的聲音、子彈打到殭屍身上的響聲、殭屍來臨時的恐怖音效、腦子被吃掉時的哀嚎。擬物音效讓這個遊戲更加生動,不會蒼白平淡。

再觀察一下ipad,翻閱圖書時紙張的摩擦聲、翻閱報紙時報紙的摩擦聲,這個小細節讓我感覺很興奮。更加認定這個品牌是在用心做產品。

音效的使用可以讓使用者更有身臨其境的感覺,尤其是模擬真實的音效。

以上是這幾天的不完全觀察,ipad設計值得學習的地方還有很多,例如提示與暗示的巧妙使用、皮套的貼心設計等。筆者認為ipad作為電腦的補充,是非常成功的一款產品(平板電腦完全替代電腦是不可能的)。至少,蘋果在如今傳統數碼新品類發展的瓶頸時期,開拓了符合人類使用習慣的新思路,單從這點值得很多中國品牌學習。

系統設計分析

系統設計出來的好壞很大程度取決於使用者需求是否合理,當然還有就是完成專案的技術上是否有難度。在公司我剛做完乙個專案,當然是乙個非常小的專案。雖然是乙個小專案,但它五臟俱全。還有就是寫的系統是為公司自己用。就算是這麼小的專案也經過了兩次大的需求的變動。由於需求分析不由我本人來做,我的角色是專案開發者。...

特效表現設計分析

特效型別 鏡頭特效 角色特效 場景特效 剪輯特效 聲效字幕效果 1.鏡頭特效 包括景深變化 景別轉換 鏡頭變焦 色調製化等。在影視類作品中往往通過攝像機的位移旋轉及其速度 鏡頭的硬體資料調整,或者配合燈光及後期編輯來實現。2.角色特效 一般體現在角色的動態表現方式方面,如動態節奏變換,運動模糊和體現...

uvm設計分析 field automation

uvm中的field automation主要實現了class中的基礎元素的copy,compare等函式,實現方式分為兩種 1 使用者註冊,field系列巨集 uvm內部呼叫static status container中的function 2 使用者自己實現do copy,do print等函式...