- 簡(jiǎn)體
- 簡(jiǎn)體中文 English
北京網(wǎng)站設(shè)計(jì)之設(shè)計(jì)哲學(xué)
“設(shè)計(jì)哲學(xué)”恐怕是在設(shè)計(jì)評(píng)論、大學(xué)設(shè)計(jì)教育中用得最多的一個(gè)術(shù)語(yǔ)了,英語(yǔ)叫做“Design Philosophy”。在這里,“設(shè)計(jì)哲學(xué)”往往并非我們普通意義上的“哲學(xué)”,而是設(shè)計(jì)師個(gè)人對(duì)于設(shè)計(jì)的理念,具有比較強(qiáng)烈的目的性。其實(shí),不同的設(shè)計(jì)師有自己不同的設(shè)計(jì)價(jià)值觀,也就形成了不同的設(shè)計(jì)哲學(xué),并不存在一個(gè)單一的、統(tǒng)一的設(shè)計(jì)哲學(xué)。有些設(shè)計(jì)師可以有自己的“設(shè)計(jì)哲學(xué)”理念,比如說(shuō)“用最少的設(shè)計(jì)達(dá)到最大的滿足”(least design for maximum satisfaction),或者“少則多”( less is more)。這些說(shuō)法,其實(shí)并非“哲學(xué)”,更多是信念、格言而已。
一、沉浸與交互式體驗(yàn)
每當(dāng)有新產(chǎn)品發(fā)布時(shí),我們都會(huì)被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時(shí)間發(fā)布的 iPad Pro 也一樣。
這背后是 Apple 基于 webGL 技術(shù),創(chuàng)造的一種沉浸與交互式產(chǎn)品體驗(yàn)。
1. 連續(xù)性
我們?cè)诋a(chǎn)品介紹頁(yè)可以看到,蘋果使用了大量的滾動(dòng) scroll 來(lái)體現(xiàn)連續(xù)性。
一方面,滾動(dòng)作為大多數(shù) Web 用戶最自然的操作,學(xué)習(xí)成本極低。
另一方面,在冗長(zhǎng)的頁(yè)面下,滾動(dòng)能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場(chǎng)銜接。
iPad Pro 的連續(xù)性
2. 趣味性
另外,采用了大量的動(dòng)畫式轉(zhuǎn)換(animated transition),即操作時(shí)展示的動(dòng)態(tài)效果,以此來(lái)增加趣味性。
伴隨著豐富的、若隱顯現(xiàn)的章節(jié)文案,就像電影的旁白一樣,娓娓道來(lái)。
通過(guò)滾動(dòng)的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會(huì)受到限制,只能在視頻中前進(jìn)或后退,毫無(wú)樂(lè)趣可言。
AirPods的趣味性
二、言之有序 1. 秩序感
說(shuō)到言之有序,我們看 iPad 的頁(yè)面介紹。四款產(chǎn)品,分別是:iPad Pro、iPad Air、iPad、iPad mini。
拍攝角度的秩序感,可謂妙不可言。
iPad的秩序感
iPad Pro 的拍攝角度接近于正側(cè)面。
iPad Air 是四分之三側(cè)面。
iPad 是正面。
iPad mini 是俯視。
如此一來(lái),即顯得有序,也不會(huì)導(dǎo)致視覺(jué)疲勞。
2. 設(shè)計(jì)語(yǔ)言
其次,官網(wǎng)與 iOS 保持協(xié)同的設(shè)計(jì)語(yǔ)言,給用戶呈現(xiàn)了一致的感官體驗(yàn)。
從 iOS 11 開始,蘋果就采用了 Large Title 大標(biāo)題的字體風(fēng)格。字重也從 Regular + Light 的組合,轉(zhuǎn)向的 Medium + Bold ,以此增強(qiáng)信息傳播中的識(shí)別力。
HomePod
另外,高斯模糊的標(biāo)題欄背景、產(chǎn)品的投影等設(shè)計(jì)語(yǔ)言也保持系統(tǒng)一貫的風(fēng)格。我們可以很清晰的看到 Web 設(shè)計(jì)的同步轉(zhuǎn)變。
三、層次 1. 視差
第三是視差帶來(lái)的層次感。
蘋果奉行包豪斯的無(wú)裝飾和極簡(jiǎn)的理念。當(dāng)然,它不是那種附庸的美觀及外表的光鮮,而是將復(fù)雜難懂的技術(shù)以簡(jiǎn)潔的形式傳達(dá)給用戶。
Mac Pro 視差滾動(dòng)
在信息層次方面,Apple 的編排設(shè)計(jì)由淺入深,猶如抽絲剝繭。很好的利用了視差滾動(dòng),傳達(dá)圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂(lè)趣。
2. 視覺(jué)張力
不僅如此,樣式上富有視覺(jué)張力?;驍U(kuò)張、或收縮、或吸引、或排斥之感覺(jué),呈現(xiàn)刺激與震撼。舉兩個(gè)例子:
A13芯片的擴(kuò)張力
擴(kuò)張力:整個(gè)畫面以 A13芯片 為視覺(jué)中心點(diǎn),元素和布局圍繞這個(gè)視覺(jué)中心點(diǎn)向外擴(kuò)張。采用發(fā)散式的視覺(jué)引導(dǎo),視覺(jué)張力就出現(xiàn)了,讓人感覺(jué)巍峨壯觀。
Pro級(jí)攝像頭的排斥力
排斥力:通過(guò)元素的大小對(duì)比,可以形成一定強(qiáng)度的視覺(jué)排斥力。Pro級(jí)攝像頭 輔以大特寫,傳達(dá)空間意識(shí)。視覺(jué)上被其構(gòu)圖、美感觸動(dòng)。
四、高級(jí)感
再聊聊蘋果的高級(jí)感是怎么來(lái)的?
1. 視覺(jué)降噪
我們都知道,高飽和度的色彩,會(huì)影響人的情緒波動(dòng)。相反,低飽和度的配色,對(duì)人眼的刺激較弱,會(huì)有一種冷靜且克制的高級(jí)感。
iMac Pro 高級(jí)感
回過(guò)頭來(lái)看蘋果官網(wǎng)的大部分頁(yè)面,除了產(chǎn)品界面色彩 和 按鈕藍(lán) 之外,其他的文字、背景、控件一律采用黑白灰色系,以此營(yíng)造高級(jí)感。
甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級(jí)灰中加了一點(diǎn)點(diǎn)綠而已。
換言之,減少使用顏色的數(shù)量,降低色彩的飽和度都能削減色彩對(duì)人的情緒,起到提升產(chǎn)品高級(jí)感的效果。
iPad 留白
除此之外,恰當(dāng)?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容,讓重要的信息更準(zhǔn)確的傳達(dá)。并且能營(yíng)造出廣闊的空間感,讓畫面得到延伸,呈現(xiàn)一種意境美。
所以我們做設(shè)計(jì)時(shí)應(yīng)當(dāng)多做減法,避免無(wú)意義的視覺(jué)元素堆砌,反而能讓你的設(shè)計(jì)更有高級(jí)的氣質(zhì)。
這又印證了現(xiàn)代主義建筑大師密斯·凡德羅的那句話:Less Is More。
2. 配圖
當(dāng)然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。
蘋果官網(wǎng)大部分的產(chǎn)品都是采用實(shí)拍+后期修圖,而非渲染圖。目的就是為了反映真實(shí)產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果,這一點(diǎn)能看到蘋果對(duì)于品質(zhì)的極致追求。
Designed by Apple in California
不僅如此,蘋果產(chǎn)品圣經(jīng)《Designed by Apple in California》,以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個(gè)幕后制作視頻,相當(dāng)硬核。
3. 蘋果式文案
做過(guò)英文 Web 的設(shè)計(jì)師都知道,英文往往比中文更好設(shè)計(jì),相同的布局英文出來(lái)的效果也更好看。
這不是崇洋媚外,心理學(xué)有個(gè)詞叫做「母語(yǔ)羞澀」。簡(jiǎn)單來(lái)說(shuō)就是,中文對(duì)于我們來(lái)說(shuō),太常見了會(huì)讓人產(chǎn)生一種廉價(jià)感(實(shí)際上是羞澀感)的心理感受。
老外也一樣,你可以看到美國(guó)企業(yè):蘋果、麥當(dāng)勞、星巴克都是使用圖形 Logo,而日本企業(yè)不用母語(yǔ),而是用英文,比如 SONY、TOYOTA、Canon。
你的下一臺(tái)電腦,何必是電腦。
回到蘋果官網(wǎng),我們看到一部分文案是英文產(chǎn)品名稱,這個(gè)不會(huì)感覺(jué)羞澀。
那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團(tuán)隊(duì)用了完全不對(duì)仗但押韻、奇怪的排比、雙關(guān)、重復(fù)等修辭手法。雖然語(yǔ)感很差,但基本上能明白字面意思。
其實(shí)這樣做的目的就是為了創(chuàng)造一種陌生感、一種獨(dú)特的語(yǔ)言風(fēng)格,來(lái)凸品牌氣質(zhì)。舉幾個(gè)例子:
重復(fù):比如說(shuō) iPad Pro「你的下一臺(tái)電腦,何必是電腦。」
雙關(guān):比如說(shuō) AppleWatch 的「它會(huì)時(shí)時(shí)關(guān)心你的心。」
排比:比如說(shuō) iMac的「從極速,到神速,任你提速?!?/span>
押韻:比如說(shuō) 配件 的「可重復(fù)充電,又可圈可點(diǎn)?!?/span>
對(duì)比:比如說(shuō) iPad mini 的「身量小,能量大。」
4. 儀式感
最后一點(diǎn)。生活要有儀式感,蘋果官網(wǎng)也有儀式感。
國(guó)際婦女節(jié)專題
在一些特殊的日子里,例如三八節(jié)當(dāng)天,友商選擇打廣告促銷。而蘋果推出了國(guó)際婦女節(jié)專題,致敬女性的偉大,這一做法頗具人文情懷。
不過(guò)話又說(shuō)回來(lái),感動(dòng)歸感動(dòng),還是參與友商的打折活動(dòng)香。
特別聲明:本文為網(wǎng)易自媒體平臺(tái)“網(wǎng)易號(hào)”作者上傳并發(fā)布,僅代表該作者觀點(diǎn)。網(wǎng)易僅提供信息發(fā)布平臺(tái)。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁(yè)面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 微信小程序開發(fā)
- 小程序開發(fā)
- 洛陽(yáng)網(wǎng)站建設(shè)
- 北京網(wǎng)站定制開發(fā)
- 沈陽(yáng)網(wǎng)站設(shè)計(jì)
- 鄭州網(wǎng)站設(shè)計(jì)
- 廊坊網(wǎng)站設(shè)計(jì)
- 高端網(wǎng)站設(shè)計(jì)
- 網(wǎng)站設(shè)計(jì)
- 石家莊網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
小程序開發(fā)完成后怎么進(jìn)行推廣呢?
小程序是一種在移動(dòng)端使用的輕量級(jí)應(yīng)用程序,目前已經(jīng)成為許多企業(yè)和個(gè)人推...
2023-04-06 -
企業(yè)網(wǎng)站改版對(duì)網(wǎng)站發(fā)展有哪些重要性?
企業(yè)網(wǎng)站代表了公司的互聯(lián)網(wǎng)形象。企業(yè)在中國(guó)經(jīng)濟(jì)的大潮中飛速發(fā)展,互聯(lián)網(wǎng)...
2020-05-15 -
如何關(guān)注網(wǎng)頁(yè)設(shè)計(jì)中的內(nèi)容流?注重網(wǎng)站客戶體驗(yàn)
“訪問(wèn)者內(nèi)容流”聽起來(lái)像是一個(gè)技術(shù)術(shù)語(yǔ),但事實(shí)并非如此 對(duì)于我們這些...
2020-04-13 -
如何判斷網(wǎng)站頁(yè)面質(zhì)量?看看這些方法
當(dāng)一個(gè)新網(wǎng)站剛剛投入運(yùn)行時(shí),搜索引擎將根據(jù)網(wǎng)站頁(yè)面的質(zhì)量給出一個(gè)初始分...
2020-05-07 -
廊坊網(wǎng)站設(shè)計(jì)建設(shè)如何更有特色
隨著人們生活水平的提高和互聯(lián)網(wǎng)的逐步普及,廊坊網(wǎng)站建設(shè)成為人們關(guān)注的焦...
2020-05-21 -
微信小程序開發(fā)過(guò)程第一篇
微信小程序作為移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的創(chuàng)新,為企業(yè)和個(gè)人提供了一個(gè)全新的數(shù)字化...
2023-08-28
預(yù)約專業(yè)咨詢顧問(wèn)溝通!
免責(zé)聲明
非常感謝您訪問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前,請(qǐng)您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問(wèn)題參見國(guó)家有關(guān)法律法規(guī),當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí),以國(guó)家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com