1、怎麼提高網站的設計感
一、 色調
到這幾乎差不多已經完成調整了,但如果你夠細心的話會發現按鈕以及導航菜單的顏色還是 Bootstrap 默認的藍色系。在有著設計師存在網站,設計師都會負責進行網站色調的調整,為了保證網站的一致性,所有按鈕和導航一般是三到四種顏色。
在這里,雖然不可能像大公司網站那樣取色嚴謹,但還是有一些快速的方法使網站看起來很搭配的。
使用 GIMP 的取色器讀取背景圖片的主題顏色,確認其 GBR 十六進制值;
使用 Color Scheme Designer 確認與差異大但同時又互補的顏色;
最後根據確定的顏色來制定按鈕,可以用[Bootstrap Buttons][]等在線直接生成。
這樣首頁上那個大大的注冊按鈕就搞定了,接下來是修改導航菜單的顏色,這個比較簡單,寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。
二、 字體
修改網頁字體是讓網站看起來更有特色、有現代感的捷徑,我們可以去谷歌的字體服務(免費正版)中隨意挑選自己喜歡的字體,但是要注意字體間的搭配,在這里我們選擇由 DesignShack 推薦的谷歌字體搭配中的一種:Cardo(用於標題) 和 Nobile(用於主體內文)。
在網頁頭部中加入此代碼:
在 CSS 樣式表 custom.css 中加入以下代碼:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完後刷新即可查看效果了,現在我們的網站樣式已經變成下面這樣了,看起來比默認好多了。
此外,除了谷歌的字體服務外還可以使用像 Fontdeck 或 Typekit 字體服務,它們的字體更多,更多的字體搭配方案可以參考 Type Connection。
三、 CSS3
將上面都搞定後接下來要做的就是再加點 CSS3 特效了,如果時間不夠的話簡單的添加上盒陰影 box-shadow 和字體陰影 text-shadow 就可以讓網站增色不少,CSS 代碼如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如果時間足夠的話還可以添加一個放射漸變填充效果,可以讓標題的顯示效果更重一些,如下面對比圖所示。(如果想要更多 CSS 效果的話可以去學習一下 CodeSchool 的在線教程)
四、jQuery
其實到這里了話網站看起來已經很不錯了,但為了讓它更加個性化,還需要再添加上一張背景圖片。對很多程序員來說這一步是比較難以進行的,那麼應該如何選擇一張設計師可能會使用的圖片呢?答案就是去 iStockPhoto 或類似的付費圖庫中去尋找。
這里我們將使用 Winter Sun 這張照片,為了讓網站保持自適應布局,還需要使用 Backstretch 這個 jQuery 插件讓背景圖可以隨時自動調整大小。
首先需要付費下載背景圖片,然後放到 /img/ 文件目錄中去。
將此圖片設置為的背景圖(background-image): $.backstretch ("/img/winter.jpg");
加入背景圖後網頁主題部分會產生遮擋,所以可以讓其透明,這樣網站效果看起來會更加現代、有設計感。這里可以使用這個技巧將網站變得透明,代碼見右邊,.container-narrow {background: url (/img/cream_st_transparent.png) repeat 0 0;}
五、 紋理
知道如何讓一個網站看起來更加高雅優雅一些嗎?是的,紋理。就像 24WAY 的背景紋理一樣。
但是這些紋理效果應該去哪裡尋找呢?設計師 Atle Mo 的 Subtle Patterns 網站是個不錯的去處,我們接下來就使用這個網站上的 Cream Dust 紋理。點擊下載,將紋理圖片保存到本地,然後放到根目錄下的 /img/ 目錄文件夾中,最後到 CSS 樣式表中加入代碼 body { background: url (/img/cream_st.png) repeat 0 0;} 即可。
六、 圖標
這里的圖標並不是指那些透明的 PNG 圖片圖標,而是圖標字體,其載入方式和字體一樣,由 CSS 樣式控制,比起圖片圖標來說這種圖標字體載入速度更加,對資源的消耗也更低。在去年 24WAY 曾經有一篇如何在網站中使用圖標字體的文章。
對於 Bootstrap 框架來說,整合的圖標字體是 Font Awesome (Shifticons 也是一個不錯的選擇),和谷歌的字體服務一樣也是免費開源的。要使用它只需將其下載下來,然後在根目錄下創建 /fonts/ 文件夾,將其放進去。然後再將 font-awesome.css 文件放到 /css/ 目錄文件夾。
接著將引用寫入網頁頭部中,代碼為 ,這時候我們可以隨時在網站上任意地方自由使用這些圖標字體了,如要想將一個卡車圖標添加到注冊按鈕的話只需聲明一下就可以,Sign up today。同時為了防止加入圖標字體後引起按鈕拉伸變形,還需要一點點額外的工作,將按鈕寬度加大一點(.jumbotron .btn i { margin-right: 8px; })。
2、怎麼優化網站????
准確的說是要多在一些平台發一些資料,,然後都超鏈接到要優化的網站上,優化是上時間的累積,不是一天倆天就能做好的
3、如何提高網站的設計美觀
這個不是用幾句話能說明白的。建議可以找一些類似風格的網站做參考。
給你點建議:
1、整體風格要統一,這樣看上去就不會太難看
2、一般美觀的網站都比較簡潔大方,不要弄的亂七八糟
3、要用大眾的審美觀去看,不能自己喜歡就可以。
4、怎麼優化網站的結構布局設計
網站的合理化布局對於網站的優化是十分重要的,如果你的網站布局比較好,布局一目瞭然,那麼搜索引擎在爬行的時候,就很順利,爬行的效率提高了,你的網站自然就能收錄的快一些,自然排名就高一些。文匯小編就跟大家分享一下,我們怎麼給客戶布局網站。
一、網站的導航。
客戶或者搜索引擎制葯進入我們的網站就可以看到網站導航,常見的網站導航有頂部主導航、左側產品導航、底部導航等。這些導航最好設置的醒目一些,比如說在背景、字體上突出一些,這樣有利於引導客戶或搜索引擎往下進行,另外,網站導航中的鏈接文字應該准確、自然的描述所指向頁面的內容,這樣方便搜索引擎通過鏈接文字了解這些欄目的具體內容,不要過分的堆砌關鍵詞。
二、網站的相關性
試想一下,假設一個用戶通過搜索某個關鍵詞找到你的網站,進入瀏覽,並沒有發現自己想要的內容,那麼用戶肯定會很失望並且馬上離開,很少人還會繼續再在網站中尋找。所以要增強網站的相關性就要從以下方面入手。
1.網站title。
網站title是一個頁面的重點,搜索引擎分析一個頁面相關性就是從title出發來識別這個頁面是關於什麼的內容;而用戶瀏覽同樣也是如此,在搜索中展現出來的就是網站的標題。現在在《怎樣對自己的網站進行關鍵詞的優化?》中詳細介紹了關於網站title、keywords等的介紹,有興趣可以了解一下。
2.網站產品的合理安排。
在做網站的時候,建站公司一般都會問你是做哪個行業的,為什麼都會這樣問呢?因為他必須要了解你的產品並且給你做好規劃,這個時候不要怕麻煩,要將你們公司的主推產品、輔助產品給他說明,更要做好合理的安排,比如說我要怎麼安排這些產品的位置,是否需要將主推產品放在輪播圖上等問題,只有你安排好了這些產品,當客戶進來的時候,才能一眼知道你是做什麼的,進行深入的了解,一點一點的引導客戶,同樣搜索引擎也是一樣的。
5、怎樣提高網頁設計創意能力
一、瀏覽網站,拓寬視野
·網站
1.pinterest
https://www.pinterest.com/
Pinterest通過用戶挖掘有趣內容,收藏並分享的模式,將全球優秀設計素材分享給大家,Pinterest採用的是瀑布流的形式展現圖片內圖片內容,無需用戶翻頁,新的圖片不斷自動載入在頁面底端,讓用戶不斷發現新的內容。
2.Behance
https://www.behance.net/
Behance是全球領先的創意設計類聚合平台,推薦和分享優秀設計作品。在這里,可以第一時間欣賞到最優秀的作品,找到最優秀的藝術家。找尋更多的創作靈感。
3.Yanko Design
http://www.yankodesign.com/
Yanko Design幾乎包含了全部最新的產品設計、新技術、設計思維,是非常值得推薦收藏的產品設計網站,喜歡的小夥伴快快收下。
4.Core 77
http://www.core77.com/
Core 77是老牌設計網站,站內瀑布式排列,像看雜志一樣的內容排版,包含科技感設計,適合設計類及理工類專業。
5.Designboom
https://www.designboom.com/
Designboom平台自從1999年起便成為藝術設計領域的大本營,獨立報道一系列產品設計、建築、藝術、攝影以及平面設計方面的先鋒作品。
6.Css winner
http://www.csswinner.com/
Css winner是一個獨特的全球性平台,專門展示和獎勵最佳網站,推廣創新設計師網站、開發者和機構。頂部有導航欄,可以根據自己感興趣的分類查看。
二、多讀書,鞏固基礎
·書籍
1.《設計中的設計》 原研哉
與藝術相比,「設計基本上沒有自我表現的動機,其落腳點更側重於社會。」以原研哉為代表的一些日本設計師,設計的出發點並非是自我風格的表現或是個人情緒的張揚,而是從揣摩大眾的感受出發——無論是視覺還是觸覺。先將日常的事物陌生化,再重新進行設計——這種貼近生活、以生活的文化積累為素材的創新在這個紛亂的信息時代顯然是十分可貴的,也必將有利於大眾的審美意識提高。
2.《現代設計史》
這部涉獵廣泛、富有洞察力的著作,縱覽了18世紀至今的實用藝術和工業設計,不僅從縱向闡述了各個設計流派、各種設計風格的演變過程及其代表作品,而且從橫向探討了設計和生產、消費、科技、商業之間盤根錯節又變動不居的關系。這是一本幾乎每個設計師都要擁有的一本書,地位很高,專業性極強,涉及和設計相關的各行各業,材料,科技,政策,物質資源,權力,需求…
3.《The Graphic Design Idea Book: Inspiration from 50 Masters》
這本書是針對優秀設計關鍵要素的介紹,介紹了廣受好評的設計師的主要作品,涵蓋的主題包括敘述、顏色、圖形和裝飾等。
4.《大設計》Penny Sparke
在《大設計:BBC寫給大眾的設計史》一書中,設計史學者彭妮•斯帕克給我們展示的,遠遠超過了一段經典設計作品的歷史。本書的五個章節,引導讀者穿越時空,依照時間順序游歷現代設計:從十九世紀的工業化生產;到現代設計運動,包括包豪斯及其他相關設計活動;經歷簡朴生活和戰爭時期;再到戰後繁榮及對新材料、新技術的探索;最後在二十一世紀以設計參與到各種最新的活動與事件中結尾。
5.《寫給大家看的設計書》
這本書出自世界級設計師之手-Robin Williams,世界著名的設計師、技術專家和暢銷書作家。大家經常用到的「親密性、對齊、重復、對比」4 個設計基本原則,就是出自《給大家看的設計書》。這本書將復雜的設計原理凝練為了簡單易懂的、可操作性強的設計技巧,並以簡潔明快的風格,展示了大量的示例,讓你了解怎樣才能按照自己的方式設計出美觀且內容豐富的產品。
三、參觀展覽,提高審美,尋找靈感
不要僅僅局限於以上方式,你需要走出去,多看是需要靈感的工作者需要做的事情,看的越多,腦子裡面東西就越多,那也就越有靈感。對於設計師來說,看設計方面的展是必須的,但也不能只看設計方面的展子,藝術創作,塗鴉,攝影展……都要去看,為什麼呢?因為美感,設計感,創意感是共通的,不論是在藝術還是設計領域,從不同方面看並吸取經驗和知識會讓你的設計更加富有創意,與眾不同。可以隨身攜帶小本子,這樣當靈感來的時候可以迅速畫下來,日積月累就會成為你自己的素材庫了。
四、研究優秀作品,解讀設計思路
當你的知識儲備量夠了以後,可以嘗試對優秀設計進行解讀,理解它的設計思路、思維邏輯。選擇幾個你最喜歡的設計師,仔細研究他們的作品。喜歡哪種設計師的設計風格、設計理念,可以從模仿他的作品開始,要注意的是模仿並不是一件壞事,不是指抄襲,它是探索你自己風格的一個過程。那些設計大師之所以能夠成為的大師,就是因為他們的作品足夠獨特,有創意,有自己的風格。我有個「鬼才設計師」專欄,專門介紹全球著名的設計師,感興趣的話可以去看一看。
五、善於觀察、發現問題
設計師還要善於觀察生活,發現生活中的問題,因為設計本身就是從實際問題出發,發現問題,解決問題的一個過程。很多設計都是為了優化人們的生活而存在的,所以設計師們尤其需要擅長發現問題。在產品本身具有設計感創意感的同時也不能忘記它是為解決問題而存在的。
就比如公交車的扶手設計,由於都是統一高度,這就對比較矮的人很不友好。
但按照上圖顯示的設計,利用三角形作為把手,就可以照顧到不同身高的人。這個問題就是來自於我們生活中經常看到的。
分享一個慢鏡頭動作分析的方法,比如坐在沙發上看書,天暗了需要開燈,一般正常人的思維就是站起來,去開燈。那作為一個設計師,就需要仔細將這一串的動作進行分解,如果是需要開頂燈,就得站起來,走過去,按開關。如果沙發旁正好有個落地燈,豈不是會方便很多,那打開燈的方式是觸摸開關、拉繩開關還是聲音開關,調節方式是需要手勢控制、遙控控制還是聲音控制。這樣就會發現很多需要優化的地方使其更加便利。所以想要發現設計點就需要把整個動作慢下來去分析。
最後還可以針對特殊人群去發現問題,像老人、小孩、上班族、家庭主婦等等。他們會面臨什麼樣的問題,這樣就會很快找准設計痛點。市場上目前有沒有解決這些問題的產品,有的話,就再思考還有哪些需要優化、完善的地方。這就需要你用挑剔的眼光來看待周圍的人和事物。
六、注重交流
在追求設計感與創意感的同時,也要考慮到所設計的作品的實用性,因為設計本身就是一個關於人,解決人的問題的行業,只有溝通交流才能了解彼此所需。這里不單單是指和用戶的交流,有的設計需要團隊協作完成,這時候,和同學、同事、合作夥伴的交流同樣非常重要。而且經常與優秀的人溝通交流比起自己一個人悶頭干效率會高跟多。
七、參加比賽,將理論應用於實踐
此外還需要實踐,執行力是身為設計師的很重要的一點,執行力的強弱是影響一個設計師的效率的重要因素之一,比起猶猶豫豫的去想怎麼做該不該做,先讓自己的手動起來,在行動中找到靈感,可以去參加一些設計類的比賽,比如IF、紅點、idea獎以及日本G-Mark設計獎等等,方便參觀到全球更多的優秀設計,理論加實踐的結合,才能做出有設計感、創意的優秀設計。
剛開始從事各種創意工作的新手設計師,可能最初做的東西並沒有那麼好,是因為相比一些老設計師,你沒有足夠的經驗和知識儲備,只有熬過積累的這個階段,最終,你的想法、創意,就會更加出彩。現在所能做的最重要的事,就是不斷學習、不斷創作。
6、怎樣才能更好的做到網站結構優化?
網站的結構優化工作是網站優化人員日常工作中必不可少的組成部分,它跟網站的收錄與權重或多或少都有些關系。其優化的好處在於:
1、網站結構優化可給用戶帶來更貼心的體驗
2、網站結構優化能增加網站的收錄機會
3、可幫助站長合理分配和提高網站權重
4、可讓建站者自己的網站關鍵字排名靠前
因此,要做好網站優化,首先要明確用戶需求,有創意有想法。
7、文字排版如何優化網站頁面設計
一個網站是否美觀關繫到用戶是否喜歡該網站,決定網站是否美觀的因素就是網站頁面設計。
從網站的角度出發,網站內容的核心就是文字,文字排版就是將文字進行合理的排列組合。從搜索引擎的角度出發,搜索引擎可以識別並採集的主要內容是文字。基於這兩點,文字內容在網頁中的重要性顯而易見,企業網站設計時需要著重對這文字部分的內容進行合理優化,讓其與網站的設計風格和表現需求相符合,從頁讓網站設計發揮出更大的價值。文字排版優化的實用方法如下:
1、文字格式應前後一致、風格統一
企業網站中運用文字時不會只集中在一個區域,所以在進行文字排版時應做到前後一致、風格統一,這樣才能保證網站頁面的整齊統一。影響文字格式的因素有文字顏色和大小,在網頁設計中這兩點應做到一前後一致,整齊美觀。另外,在做到統一的同時還應注意動態性,讓網上頁面即整章有具有不失乏味。
2、文字的間距和行距應做到適當、科學
文字的間距和行距指的是兩個文字之間和兩行文字之間的距離,企業網站頁面設計時應做到科學適當的設置網站頁面文字的間距和行距,讓整個頁面的內容即緊湊又合理,只有合理的文字排列才能讓用戶順便利的閱讀網站內容。
避免出現的情況:①文字間距相對較小或過大,②文字行距過大或過小。無論是文字的間距過大還是過小都是不對的,過小會給人一種密密麻麻的感覺,讓用戶沒有想要閱讀下去的俗慾望;而過大就會導致網站頁面的內容量過少,能夠為用戶提供的信息量降低。
分形科技建議:網站頁面文字排版時上下文的間距控制在1.5倍相對合適,這符合大部分人的審美觀念。
3、文字的顏色選擇應合理
網頁中的文字也是可以設計顏色的,這個顏色的選擇應與網站的背景色有明顯的差異,讓人可以很容易的將二者區分開來,這樣做有利於增強網頁中文字內容的辨識度。另外,還需要從整個頁面出發,注意整體的層次感,如文章的標題和正文中需要重點突出的內容可以設置一些不一樣的顏色,讓網站頁面豐富起來,吸引用戶閱讀。
望採納!謝謝!
8、大型網站架構該怎麼優化設計
你得把你的網站拿出來看了才知道怎麼優化改進。並不是說每個網站的優化思路都一樣。比如,你優化結構之前你得考慮你的長尾關鍵詞要怎麼擴展,長尾詞是不是有規律可循。如果有規律,你可以直接利用程序生成標題,生成內容。要根據你的設計思路去設計網站結構。要是每個網站優化思路都一樣,那為什麼不直接程式化,還拿優化運營來做什麼?自動化多好。但是,這是不現實的。所以,你的提問沒人能幫得到你。
9、一個新網站怎麼做優化?
第一、關鍵詞分析
SEO優化的第一步,也是最重要的一步,就是將關鍵詞需要關注的量進行分析、關鍵詞與網站的相關性進行分析、關鍵詞的布置和排名預測等相關知識進行分析,
將各個部分聯系在一起,不是每一個部分都獨立於彼此,而是環環相扣,標題和內容等都與關鍵詞密切相關,進行搜索引擎時也會容易被收錄和接納。
第二、網站架構分析
主要包括剔除網站架構設計中不符合人性化設計的部分、實現目錄結構的簡潔清晰、網站導航的創意性獨特,突出性明顯和外部鏈接的優質廣泛等內容。
第三、網站目錄和頁面優化
這也是SEO優化的基本操作了,將網站的基本信息進行優化處理,保證用戶對於網站能夠在瀏覽之後有一定的了解和熟悉。
頁面的字體大小要合適,不能因為過小而失去一大批視力不好的消費者,也不能因為過大沒有多少信息而失去有強迫症或者發散能力不強的用戶等。
第四、內容發布和鏈接布置
SEO優化的重要步驟之一就是內容的定期發布和更新,要合理安排網站內容的更新日程和相關訊息。
而且發布的內容要保證原創性,鏈接的質量也要得到保障,不要發一些復制來的文章或者添加一些低質量的鏈接,這樣反而對優化效果並不好。
10、如何優化好一個網站
1、頁面關鍵字與關鍵字密度優化
很多搜索引擎都是通過頁面的關鍵詞密度來決定該頁面對關鍵字的關聯度,關聯度越高,該頁面的相關性就越高,所以應確保關鍵字在整個網頁中的充分利用和合理分布。具體做法有:充分利用所有可以利用的因素,但不要過分重復或簡單排列關鍵字;應遵循必要的語法規則,形成自然流暢的語句,使網頁不失吸引力;從頁面因素的優化角度出發,可考慮將關鍵字分布在網頁標題元、網頁描述/關鍵字元、正文標題、正文內容、文本鏈接、ALT標志當中。
2、框架優化
所謂框架型網頁就是一個網頁的某一邊導航菜單是固定的,而頁面另一邊的信息可以上下移動。框架中的內容是無法在後台代碼中體現的,而對於那些主要為搜索引掌的搜索程序來說,其設計思路都是完全忽略某些HTML代碼,轉而直接鎖定網頁上的實際內容進行索引。這樣,搜索引擎在那些一般性的框架網頁上根本找不到要搜索的內容。
3、動態頁面優化
所謂動態網頁指的是採用ASP、PHP、JSP、CGI等程序動態生成的頁面。此類網頁中的大部分內容來自於網站相連的資料庫,在網路空間中並不存在實際的頁面,只有在接到用戶的訪問要求,即當用戶在變數區中輸入相應值以後,才自動生成。而搜索引擎只是一個搜索程序,它無法像真實的用戶一樣選擇變數並輸入數值。
4、建立網站地圖
網站地圖包括主要網頁的內容鏈接或者欄目鏈接。根據網站的大小、頁面數量的多少,它可以鏈接部分主要的或者所有的欄目頁面。這樣,搜索引擎程序得到了網站地圖頁面,就可以迅速地訪問整個站點上的所有網頁及欄目。為了使網站地圖吸引搜索引擎與真實訪問者,一定要在鏈接後寫上一定的描述性短句,對與此鏈接相關的關鍵詞進行簡單描述,但是不能過度使用關鍵詞。作為網站地圖,不僅是為搜索引擎設計的,也是為真實的訪問者設計的,如果訪問者能感覺到地圖好用,搜索引擎也同樣能正確地理解地圖的意義。
以上就是西安文菲科技優化的流程。