• 
• 
• 
• 
• 
• 
• 

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

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

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

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

個(gè)性化的網(wǎng)站設(shè)計(jì)思路-旋轉(zhuǎn)和平移相關(guān)標(biāo)簽：網(wǎng)絡(luò)公司，設(shè)計(jì)網(wǎng)頁，網(wǎng)站建設(shè)，開發(fā)網(wǎng)站

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

搜索引擎優(yōu)化相關(guān)性排名 突破網(wǎng)站設(shè)計(jì)的最后一公 如何實(shí)施搜索引擎優(yōu)化項(xiàng) SEO計(jì)劃之關(guān)鍵詞優(yōu)化 怎樣設(shè)置關(guān)鍵字才可以被 優(yōu)質(zhì)的內(nèi)容的優(yōu)化 VPN安全協(xié)議概覽 五步包裝網(wǎng)站，提高網(wǎng)站 網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖 優(yōu)秀站長必備思路上 個(gè)人主頁作用 什么是CSS＋DIV及 網(wǎng)站定位整合及欄目設(shè)計(jì) 青島高端網(wǎng)站設(shè)計(jì)公司哪 動態(tài)網(wǎng)頁對SEO的影響 論企業(yè)網(wǎng)站設(shè)計(jì)的10個(gè) 青島海信寬帶多媒體再次 如何提高網(wǎng)站轉(zhuǎn)換率的設(shè) 企業(yè)建站關(guān)鍵注意事項(xiàng) 企業(yè)如何建站 網(wǎng)頁設(shè)計(jì)流行趨勢解讀 一名視覺設(shè)計(jì)師對于網(wǎng)站 我們還需要“面包屑”嗎 外貿(mào)企業(yè)網(wǎng)站建設(shè)方案及 在制作網(wǎng)站的時(shí)候我們幫 進(jìn)一步優(yōu)化網(wǎng)站，減少百 網(wǎng)站布局有講究 怎樣做個(gè)簡單的小網(wǎng)站 企業(yè)建站十大理由 首頁代碼規(guī)范 網(wǎng)站建設(shè)之美觀與營銷需 企業(yè)建站的盈利模式及網(wǎng) 一起關(guān)注2015年如何 新創(chuàng)建的網(wǎng)站如何讓百度 讓訪客信任你的十二大網(wǎng) 密碼保護(hù)信息的用戶體驗(yàn) 青島做外貿(mào)網(wǎng)站建設(shè)哪家 如何才能短期內(nèi)提高網(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)站制作公司 開發(fā)區(qū)信息港 山東在線門戶