• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 個(gè)性化的網(wǎng)站設(shè)計(jì)思路-旋轉(zhuǎn)和平移

個(gè)性化的網(wǎng)站設(shè)計(jì)思路-旋轉(zhuǎn)和平移

網(wǎng)頁(yè)設(shè)計(jì)師 于2019-06-30 13:00發(fā)表 閱讀次數(shù) 2412次

在項(xiàng)目較多的時(shí)候，青島網(wǎng)站設(shè)計(jì)師有時(shí)候會(huì)出現(xiàn)設(shè)計(jì)思路枯竭的情況，也許下面的幾種簡(jiǎn)單的方法能夠緩解設(shè)計(jì)創(chuàng)意枯竭的問(wèn)題，讓您的思路耳目一新，通過(guò)簡(jiǎn)單的旋轉(zhuǎn)和平移，快速改變網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)，增強(qiáng)網(wǎng)頁(yè)個(gè)性化。 　　方法一，整體旋轉(zhuǎn)、背景旋轉(zhuǎn)、綜合旋轉(zhuǎn) 　　旋轉(zhuǎn)適合的頁(yè)面及其產(chǎn)生的效果 　　旋轉(zhuǎn)打破了畫(huà)面橫平豎直的呆板，旋轉(zhuǎn)后的視覺(jué)更加輕松活躍，旋轉(zhuǎn)構(gòu)成的斜線條也可以產(chǎn)生運(yùn)動(dòng)和速度感，所以許多運(yùn)動(dòng)的、刺激的、具有速度感的主題適合直接旋轉(zhuǎn)處理，另外運(yùn)動(dòng)、速度衍生出年輕的、時(shí)尚的之類主題也可以適用，輕微的旋轉(zhuǎn)也可以使畫(huà)面更貼近于自然的生活狀態(tài)，增強(qiáng)真實(shí)性與親切感。但在開(kāi)始旋轉(zhuǎn)設(shè)計(jì)改造之前，一定會(huì)有人產(chǎn)生這樣的疑惑。 　　旋轉(zhuǎn)可能會(huì)給我們帶來(lái)以下一些問(wèn)題 　　1.信息量的限制 　　由于旋轉(zhuǎn)的構(gòu)圖，斜線與面邊面框最終會(huì)有一個(gè)交界點(diǎn)，可能導(dǎo)致信息不能無(wú)限制的延續(xù) 　　2.排版的限制 　　由于旋轉(zhuǎn)的形式需要整體的配合，而有部分素材無(wú)法配合旋轉(zhuǎn)就會(huì)比較花時(shí)間去歸納處理。 　　3.瀏覽舒適性問(wèn)題 　　由于角度傾斜，打破了習(xí)慣性視覺(jué)在提神的同時(shí)也會(huì)給瀏覽造成一定的困難和不舒適。 　　這些都是我們需要注意和解決的問(wèn)題，帶著這些問(wèn)題，我們一起來(lái)看看旋轉(zhuǎn)的一些潛規(guī)則。 　　在斜排布時(shí)注意幾個(gè)要點(diǎn)，以免影響閱讀。 　　1.非內(nèi)容必要原因。文字盡量保持一定規(guī)律排布對(duì)齊。 　　2.非內(nèi)容必要原因。并列內(nèi)容盡量使用同一變換角度。 　　3.圖三為正確的變換方式 　　在簡(jiǎn)單的圖示下，這些錯(cuò)誤看起來(lái)顯而易見(jiàn)，但在實(shí)際的操作中，由于多種因素的干擾我們往往忽視這些問(wèn)題。 　　在排版過(guò)程中無(wú)論如何我們都要盡量讓依造某一規(guī)律對(duì)齊，在畫(huà)幅已旋轉(zhuǎn)的情況下更應(yīng)該保持理性。旋轉(zhuǎn)基本可以分為以下幾種類。 　　1.整體旋轉(zhuǎn)： 　　背景和內(nèi)容一起旋轉(zhuǎn)，需要注意兩條邊緣線，一是保持旋轉(zhuǎn)的邊緣線整齊，另外也要注意旋轉(zhuǎn)后的內(nèi)容不能超出1000寬度。為了兼顧信息的閱讀性，背景和內(nèi)容的同時(shí)旋轉(zhuǎn)的角度盡量不要超過(guò)15度。 　　2.背景旋轉(zhuǎn)： 　　背景旋轉(zhuǎn)，信息內(nèi)容保持不變。這種旋轉(zhuǎn)即可以產(chǎn)生旋轉(zhuǎn)的視覺(jué)形式感，又可以保證文字信息的閱讀性，是比較推薦和常用的方式。但信息排版同樣也受到斜線的1000寬度的限制，在具體操作中需要進(jìn)行細(xì)節(jié)的調(diào)整。 　　3.綜合旋轉(zhuǎn)： 　　根據(jù)內(nèi)容結(jié)構(gòu)進(jìn)行有選擇的部分旋轉(zhuǎn)。通常選擇內(nèi)容文字較少的SLOGAN跟隨背景一同旋轉(zhuǎn)共同達(dá)到旋轉(zhuǎn)的形式感。信息量較多的正文保持水平不變，以方便閱讀。這種方式也是經(jīng)常被使用到。 　　PS：黃底為1000寬度的內(nèi)容面積、藍(lán)底為背景面積、白色虛線為1000寬度標(biāo)準(zhǔn)線、SLOGAN(主視覺(jué)標(biāo)題))、文字、圓泡泡(圖素)圖片組成簡(jiǎn)易的網(wǎng)頁(yè)示意圖、透明背景為增闊的信息面積。(對(duì)于1024用戶的最大網(wǎng)頁(yè)寬度的定義，不同的公司有不同的標(biāo)準(zhǔn)，通常是在1000~1004范圍，為了美觀，設(shè)計(jì)上通?？啥啾Ａ粢恍┩膺吘唷? 　　看看——歪腦袋讓世界與眾不同 　　一、整體旋轉(zhuǎn) 　　這是”一句話小說(shuō)”征文比賽的活動(dòng)頁(yè)面，作者用手寫(xiě)的方式來(lái)表達(dá)，通過(guò)小小的旋轉(zhuǎn)把手寫(xiě)的輕松狀態(tài)體現(xiàn)出來(lái)，增強(qiáng)頁(yè)面的親和力。整體旋轉(zhuǎn)可以減小旋轉(zhuǎn)的角度，以保證信息的閱讀性。 　　二、背景旋轉(zhuǎn) 　　我們可以看到這個(gè)頁(yè)面的文字信息基本保持著水平的狀態(tài)。黑色與白色的背景的斜切面構(gòu)成了整體的形式感。黑白的對(duì)比和貫穿頁(yè)面頭尾斜線條都讓頁(yè)面的視覺(jué)產(chǎn)生了強(qiáng)烈的視覺(jué)沖擊力。不過(guò)在大刀闊斧的形式感設(shè)計(jì)背后，文字的排版還需要小心斟酌處理。這個(gè)頁(yè)面統(tǒng)一采用了右對(duì)齊的方式。左側(cè)文字的排版也恰好與斜線相契合。這需要我們?cè)谥谱鬟^(guò)程中對(duì)內(nèi)容進(jìn)行一定的編排和修整，以使其整體看起來(lái)更加舒適。 　　三、綜合旋轉(zhuǎn) 　　這兩個(gè)頁(yè)面排版形式相近，它們都選擇了頭部SLOGAN旋轉(zhuǎn)的形式，并把SLOGAN和正文明確分割開(kāi)以避免角度的不同造成的閱讀干擾，信息量較大的正文置于下面保持水平。這樣的方式讓頁(yè)面形式感和閱讀性并存。 　　做做——QQ西游卻橋難 　　一、QQ西游難之鵲橋難 　　需求分析： 　　這是《QQ西游》新版本發(fā)布的廣告落地專題，新版本的名字叫”鵲橋難”，而這個(gè)版本也將結(jié)合七夕這樣一個(gè)節(jié)日時(shí)間點(diǎn)正式發(fā)布。”鵲橋相會(huì)”也成為了畫(huà)面的主要視覺(jué)。 　　傳統(tǒng)思路： 　　說(shuō)起鵲橋相會(huì)或者七夕，我們的第一直觀畫(huà)面大致是以下兩種類型，剪影的男女相會(huì)，腳下踩著一座橋，亦或是穿著情侶套裝的男女相擁，身后云彩朵朵……對(duì)于一些沒(méi)有情侶套裝的游戲人物，有時(shí)只能將兩只目露胸光的，喔打錯(cuò)字，是兇光，目露兇光飽含殺氣的的男女主角硬是湊成了佳人一對(duì)。不過(guò)素材的限制有時(shí)也是比較無(wú)奈的，暫時(shí)拋開(kāi)素材的問(wèn)題，想想我們?nèi)绾卧谶@種傳統(tǒng)表現(xiàn)手法的基礎(chǔ)上讓自己的網(wǎng)頁(yè)稍顯特別呢? 　　旋轉(zhuǎn)的靈光乍現(xiàn)： 　　經(jīng)驗(yàn)并非都是個(gè)好事，經(jīng)驗(yàn)帶給我們習(xí)慣性的思維，它可能會(huì)讓我們更快的做出判斷，但過(guò)去正確的判斷在今天并不一定就是適當(dāng)?shù)恼_的。當(dāng)我們見(jiàn)慣了某種傳統(tǒng)的版式，在設(shè)計(jì)的時(shí)候多少有點(diǎn)失去激情和創(chuàng)新的動(dòng)力，在依靠經(jīng)驗(yàn)設(shè)計(jì)的長(zhǎng)期設(shè)計(jì)者看來(lái)，面對(duì)傳統(tǒng)版式，接下去的動(dòng)作無(wú)非就是在頭部加入男女相擁的主視覺(jué)然后繼續(xù)添加完應(yīng)該有的信息內(nèi)容，憑借經(jīng)驗(yàn)就此草草了事交差。倘若我們變換一下版式，給自己制造一些難度和挑戰(zhàn)，或者新的想法也便應(yīng)運(yùn)而生。這塊黃色的面版，在原來(lái)的視覺(jué)中可能是一個(gè)傳統(tǒng)的內(nèi)容區(qū)域，但當(dāng)它旋轉(zhuǎn)之后，也許它便跳出了原有的概念。新的設(shè)計(jì)思路則可能由此開(kāi)啟。 　　「?jìng)鹘y(tǒng)版式」與「旋轉(zhuǎn)版式」 　　設(shè)計(jì)分解： 　　STEP1：旋轉(zhuǎn)版式 　　當(dāng)我們拋棄了傳統(tǒng)的版式，那個(gè)黃色的面版也許不再是一個(gè)只用來(lái)承載信息的容器，當(dāng)我們一手掌握著主題，一手敞開(kāi)著想像時(shí)，它或許漸漸就變成了鵲橋難中的那座橋。而俯視角的視覺(jué)也非同于傳統(tǒng)的頁(yè)面。新的創(chuàng)意就在自我制造困難的路上誕生了。 　　STEP2主視覺(jué)設(shè)定 　　根據(jù)大的創(chuàng)意方向，我們進(jìn)行主視覺(jué)設(shè)計(jì)，這是一個(gè)俯視的視角，我們根據(jù)視角的定義進(jìn)行人物的角度和動(dòng)作的設(shè)計(jì)(由于游戲版本內(nèi)容的設(shè)定，無(wú)奈中只能選擇了游戲中的悟空與玉兔精來(lái)扮演這無(wú)厘頭的情侶角色)。并在橋的兩側(cè)增加羽毛的造型，代表”鵲”橋這一獨(dú)特的定義。 　　STEP3信息排布 　　將信息進(jìn)行模塊分布，并盡量錯(cuò)開(kāi)與主視覺(jué)相沖突的部分，比如兩個(gè)人物與內(nèi)容面版相交集的部分。為了給內(nèi)容騰出足夠的空間，我們也需要適當(dāng)調(diào)整主視覺(jué)人物的位置，在調(diào)整主視覺(jué)人物位置的同時(shí)盡量保證人物的四分之三以及內(nèi)容信息在1000像素的最小范圍之內(nèi)。 　　頁(yè)面展示 　　速度、隨性、自由，是旋轉(zhuǎn)頁(yè)面帶給我們的視覺(jué)感受。 　　而當(dāng)我們旋轉(zhuǎn)頁(yè)面的同時(shí)，新的創(chuàng)意也可能隨之產(chǎn)生。它讓我們知道，方塊的面版不僅僅是個(gè)信息的容器，只要稍稍發(fā)揮想像，它也會(huì)成為視覺(jué)和創(chuàng)意的主體。 　　不妨一試。 　　方法二，上下格局、左右格局、混合格局 　　在平衡過(guò)程中我們也需注意以下幾點(diǎn)。 　　1.圖一：在1024X768的用戶顯示器下是看不到平衡的效果的。 　　2.圖二：創(chuàng)意不同當(dāng)然選擇也不同，圖二的平移法形成三段畫(huà)幅，塊面較小沖擊力也相對(duì)不足。當(dāng)然規(guī)矩是活的，設(shè)計(jì)中也可以依創(chuàng)意選擇。 　　3.圖三：建議使用的平衡方式。不論哪種顯示器用戶都可以看到平移的效果，畫(huà)面整體，沖擊力強(qiáng)。 　　1.圖一：上下格局，SLOGEN和主視覺(jué)都在首屏。 　　2.圖二：左右格局，SLOGEN和主視覺(jué)在左側(cè)，使用這種方式的時(shí)候盡量讓SLOGAN的重點(diǎn)部分保證在首屏高度以內(nèi)。 　　3.圖三：混合格局，內(nèi)容和SLOGEN、主視覺(jué)各占一席風(fēng)水寶地。 　　看看——霸氣側(cè)漏同樣精彩 　　一、上下格局 　　這是平移創(chuàng)意中比較精巧的一個(gè)頁(yè)面，它利用了平移后的視覺(jué)關(guān)系創(chuàng)造出新的空間感受。以石塊為主要質(zhì)感的前面景主要承載信息內(nèi)容，以場(chǎng)景為主的后背景主要配合人物表現(xiàn)。這種方式在普通的上下版塊關(guān)系的頁(yè)面中比較常見(jiàn)，但是應(yīng)用在左右格局的平移頁(yè)面中，就顯得比較出彩。人物與場(chǎng)景與石面版的前后關(guān)系也處理得不錯(cuò)(除了石塊的投影減弱了空間外)?？偟脕?lái)說(shuō)算是一個(gè)比較驚艷的創(chuàng)意表現(xiàn)。 　　平移的方式改變了我們?nèi)粘５囊曈X(jué)習(xí)慣，也給創(chuàng)意帶來(lái)了新的空間和挑戰(zhàn)。 　　2、左右格局 　　這個(gè)頁(yè)面將LOGO和SLOGAN放到左側(cè)，并保證了主SLOGAN信息和LOGO以及人物的頭部在首屏以內(nèi)。平移產(chǎn)生的前后空間設(shè)計(jì)，使畫(huà)面動(dòng)靜結(jié)合。前景是安靜的信息，而蘊(yùn)藏其后的是戰(zhàn)國(guó)的烽火連天。 　　3、混合格局 　　應(yīng)用不對(duì)稱格局進(jìn)行按鈕和內(nèi)容的互動(dòng)，形式和功能一體化。 　　除去背景，它無(wú)非就是一個(gè)排版清晰的頁(yè)面，但平移后交互層級(jí)更加清晰。 　　做做——QQ西游裝機(jī)專題 　　QQ西游裝機(jī)專題 　　這是QQ西游的網(wǎng)吧裝機(jī)專題，收到需求后，我們通過(guò)簡(jiǎn)單的排版完成了頁(yè)面。畫(huà)面除了簡(jiǎn)潔也便沒(méi)有其它的特點(diǎn)，氣氛不足也無(wú)任何的亮點(diǎn)，時(shí)間緊迫、創(chuàng)意枯竭，我們要如何拯救。 　　為了尋找一些不一樣的視覺(jué)效果，我們用了通用性的平移方式，下面我們來(lái)看看，它是否能夠?yàn)槲覀儙?lái)一些不同的表現(xiàn)并留意在這過(guò)程中間的方法和注意事項(xiàng)。 　　STEP1平移背景 　　將背景平移，設(shè)定前景和背景的顏色，因?yàn)轫?yè)面的交互需求的主SLOGAN是火爆裝機(jī)，可以選擇對(duì)比色來(lái)增強(qiáng)視覺(jué)沖擊力。讓專題的整體調(diào)性更加鮮亮一些。在平移時(shí)可以選擇移至800像素寬度的邊緣，這樣1024的用戶也可以看到平移效果。 　　STEP2實(shí)物化設(shè)定 　　通過(guò)顏色的設(shè)定，我們可以將其場(chǎng)景化，讓畫(huà)面更加深動(dòng)，這里我們選擇了桌面的木板質(zhì)感做為黃色的實(shí)物設(shè)定，紫色的內(nèi)容界面則通過(guò)卷角設(shè)定為一張紙質(zhì)的海報(bào)。 　　STEP3細(xì)化 　　當(dāng)實(shí)物化設(shè)定完成后，我們就可以對(duì)其進(jìn)行細(xì)化，由于是裝機(jī)主題，我們將鍵盤(pán)鼠標(biāo)、游戲道具還有獎(jiǎng)勵(lì)一起放上桌面，讓人感受到裝機(jī)后可以直接體驗(yàn)游戲的感受。然后大體細(xì)化一下光影讓視覺(jué)更加整體。這樣就基本上完成了。 　　最終效果： 　　通過(guò)平移，我們?yōu)橐粋€(gè)普通的頁(yè)面添加了小小的精彩，平移的效果讓整體畫(huà)面更加跳躍透氣。 　　方法三，旋轉(zhuǎn)和平移 　　如果每天要面對(duì)著巨大的需求量，難免有創(chuàng)意枯竭的時(shí)候，如果有一些相對(duì)討巧的辦法，能夠不受主題限制，當(dāng)然是再好不過(guò)的，這時(shí)候，我們不防試試這簡(jiǎn)單的小辦法。 　　旋轉(zhuǎn)和平移，這是針對(duì)整個(gè)頁(yè)面的大版式而言的，到底會(huì)造成怎樣一種效果，我們繼續(xù)往下看。 　　圖一：一張優(yōu)質(zhì)的穩(wěn)定的攝影圖片。 　　圖二：旋轉(zhuǎn)后的不穩(wěn)定構(gòu)圖使圖片顯得活潑動(dòng)感而有趣。 　　圖三：重心右移，打破對(duì)稱的構(gòu)圖增強(qiáng)了畫(huà)面的緊張感。 　　這種最快速改變視覺(jué)結(jié)構(gòu)的簡(jiǎn)單方式，可以快速的運(yùn)用于網(wǎng)頁(yè)中嗎? 　　圖一：我們正常的頁(yè)面版式，居中對(duì)齊，穩(wěn)定整齊，稍顯呆板。 　　圖二：畫(huà)面中心旋轉(zhuǎn)30度。 　　圖三：整體畫(huà)幅向右平移。 　　以上的幾種旋轉(zhuǎn)和平移方法，看似簡(jiǎn)單，但實(shí)際上需要較深青島網(wǎng)站制作和設(shè)計(jì)功底，才能靈活運(yùn)用。

個(gè)性化的網(wǎng)站設(shè)計(jì)思路-旋轉(zhuǎn)和平移相關(guān)標(biāo)簽：網(wǎng)站搭建，網(wǎng)站制作方案，網(wǎng)站優(yōu)化，網(wǎng)站改版

相關(guān)熱點(diǎn)推薦

創(chuàng)造設(shè)計(jì)中的優(yōu)雅與節(jié)奏 網(wǎng)站的視覺(jué)路徑和版式設(shè) 交互設(shè)計(jì)模式——分頁(yè) html5與網(wǎng)站優(yōu)化 網(wǎng)站首頁(yè)設(shè)計(jì)的好看，這 網(wǎng)頁(yè)設(shè)計(jì)中的圖片運(yùn)用與 青島網(wǎng)站建設(shè)布局好關(guān)鍵 網(wǎng)站關(guān)鍵詞擺放的四個(gè)關(guān) 青島網(wǎng)站設(shè)計(jì)哪家好 常見(jiàn)的排版方式與表現(xiàn)類 優(yōu)化用戶體驗(yàn)，讓網(wǎng)站呈 影響網(wǎng)站排名的一些不必 青島網(wǎng)站設(shè)計(jì)容易犯的幾 用戶體驗(yàn)中溝通的技巧 如何計(jì)算搜索引擎關(guān)鍵詞 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理- 什么是網(wǎng)站的轉(zhuǎn)化率？ 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價(jià)格越來(lái) 網(wǎng)頁(yè)配色密碼 響應(yīng)式網(wǎng)頁(yè)你了解嗎？ 如何創(chuàng)建一個(gè)用戶體驗(yàn)良 店鋪推廣之SEO入門(mén) 寫(xiě)給在職設(shè)計(jì)師們 哪家英文網(wǎng)站建設(shè)做得比 分類目錄 一個(gè)好的網(wǎng)站應(yīng)該同時(shí)具 網(wǎng)頁(yè)設(shè)計(jì)制作應(yīng)注意的問(wèn) 網(wǎng)頁(yè)界面設(shè)計(jì)教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計(jì)如何做好風(fēng)格統(tǒng) 2020年主流網(wǎng)頁(yè)的設(shè) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁(yè)被修改的辦 WEB設(shè)計(jì)經(jīng)驗(yàn) 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設(shè)計(jì)的網(wǎng)站

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶