導航:首頁 > 萬維百科 > 提升網頁設計

提升網頁設計

發布時間:2020-07-28 19:40:19

1、網頁設計知識提升?

我覺得吧先下些免費的模板來學會比較快點,光靠自己學沒什麼壓力,也不知道問題出在哪裡
或者看看人做好的演示版本,我看到
http://iisp.com/design/?s=macui
這個地方模板挺多的,還有實戰演示的版本!

2、怎麼提高網站的設計感

一、 色調
到這幾乎差不多已經完成調整了,但如果你夠細心的話會發現按鈕以及導航菜單的顏色還是 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; })。

3、如何提高網頁設計的滿意度

用戶調研 設計用戶體驗調研問卷,包括用戶基本網路行為、產品使用情況、用戶態度、可用性評估、用戶群背景等信息。
可以通過在線問卷等多種方式大范圍開展調研
用戶調研報告包括分析整理後的問卷調查數據,形成單項評估結論,包括用戶群分析(用戶行為、態度、背景資料、使用情況)、用戶需求、用戶滿意度等。
用戶調研的目的是幫助交互設計師調查了解用戶及其相關使用的場景,以便對其有深刻的認識(主要包括用戶使用時候的心理模式和行為模式),從而為後繼設計提供良好的基礎用戶訪談
1,通過小范圍訪談,收集用戶的意見和在使用過程中可能存在的實際狀況或問題,最後將分析結論匯總為用戶訪談報告。
2,好的設計人員一定是要是一個好的用戶需求分析策劃和訪談人員,做訪談時要以設計的思路去考慮用戶所說的,用設計的發現眼光去發現用戶所說的背後隱含的意義,並且要有強的邏輯思維去整理,並做出迅速的反應,即穩,准,狠。
3,用戶訪談的目的主要是輔助設計人員了解用戶的使用習慣和使用背景。
運營分析
1,針對收集到的網站運營和用戶行為數據進行分析,發現其中的規律,總結網站整體運營情況、用戶群和行為模型,以及相應的用戶體驗指標,形成運營數據單項評估結論。
2,分析對象以產品研發和維護、內容管理、公司客戶銷售和服務、用戶管理服務為主,發現與用戶體驗相關的運營問題,比如組織、流程和工具、員工和能力、KPI、IT工具維度分析運營中的問題等,並分析原因和給出改進建議
用戶需求分析策劃
1,用戶需求分析策劃是觀察典型用戶使用產品的過程,最後在提交的用戶需求分析策劃報告中總結需求分析策劃過程中發現的問題,並給出改進建議。其過程包括:
2,制定用戶需求分析策劃的范圍、評估標准、實施流程、人員安排和時間計劃等
實施用戶需求分析策劃,收集相關數據
3,分析整理用戶需求分析策劃結果,形成評估結論,主要包括現有網站的可用性問題及用戶反饋。
用戶需求分析策劃的目的是需求分析策劃產品而不是用戶本身,以預測真實真實環境下用戶可能會遇到的嚴重的產品問題。
用戶體驗工作還有許多可以做,在這里只介紹這么幾個方法。所有這些最終還是需要認真切實的執行。在工作中不斷的實踐提升水平,以用戶來驅動產品的設計。

4、如何提升網頁設計的視覺層次感

1. 明確元素設計目標
網頁上的各項元素通常都有其存在的目的和意義,在構建視覺層次時我們就可以從這方面著手,根據網頁元素的不同角色確定優先順序,然後進行視覺層次的構建。
2. 考慮用戶瀏覽模式
當用戶初次訪問網站時,他們一般不會仔細瀏覽所有內容,而是會進行快速的掃視,確定其中是否有自己感興趣的內容。
3. 功能性優先
我們常常會有這樣一個誤區,認為視覺層次是服務於網站設計美感的。其實,視覺層次設計的功能性反而要更重要一些。設計師在構建視覺層次時首先需要確保每個元素發揮了自己的作用,比如提供給用戶清晰的導航菜單、可見的購買途徑等,然後再考慮元素組合的界面美觀與否。
4. 善用留白
留白或者說負空間,不僅僅是指界面元素之中空白的區域,它更是視覺層次構成的核心元素之一。在視覺層次設計中,留白一方面可以用來聯系或區分不同內容元素,創造別具一格的布局。另一方面它還可以幫助強調某個關鍵元素,讓它獲得用戶額外的關注。
5. 使用黃金分割
黃金准則主要是指1:1.618的頁面比例,它被公認為是最具美感的,在自然界、日常生活、舞檯布局等多個方面都有著不同的應用。

5、作為一個美工,如何提高頁面設計水平?

哇,,我現在正想成為一個美工呢。能不能一起交流下

我個人認為你要提高設計水平,除了過硬的美工基礎。你應該還是要有自己的思想,構思

用自己的色彩來設計一個活動頁面或者是網頁

如果這還認為不夠的話,。你就多多欣賞下其他高手的設計作品,然後反復思......

比如經常在淘寶看看淘寶的一些活動頁面,或者上其他的網站去看看都是可以的

望樓主採納支持下哈。。保持通話啊

6、如何提高網頁設計水平

1、學好html和css編程。
2、注重細節。
3、善於使用留白。
4、圖片很重要。
5、充分發揮色彩的威力。
6、不要忘了頁腳。
7、清晰的導航條。

7、怎樣提高網頁設計創意能力

一、瀏覽網站,拓寬視野
·網站
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設計獎等等,方便參觀到全球更多的優秀設計,理論加實踐的結合,才能做出有設計感、創意的優秀設計。
剛開始從事各種創意工作的新手設計師,可能最初做的東西並沒有那麼好,是因為相比一些老設計師,你沒有足夠的經驗和知識儲備,只有熬過積累的這個階段,最終,你的想法、創意,就會更加出彩。現在所能做的最重要的事,就是不斷學習、不斷創作。

8、網頁設計師 平時活不多 怎麼提高自己的水平

轉一個設計師的類似看法
1,除非你十分的喜歡,為此可以放棄一切,專心致志的學這一樣,否則,放棄吧,網頁設計知識其實很難,很廣,牽扯的技術從伺服器、防黑到美工、flash和動態的asp語言都必須有一個深刻的了解,否則,你做的網頁都是有缺陷的,或者呆板、或者被黑客攻擊、或者更新復雜。近年來,網路開發語言飛速發展,新興的CSS定位等等製作方法,讓我覺得我已經落伍了……
2,確保你有一定的美術基礎,如果沒有任何的美術基礎,請不要進來,因為你會發現你很難學好,當然不排除個人的努力,自然也可以超過所謂的搞藝術的。另外網頁設計和其他的設計一樣,面對的是用戶,所有你還要有開闊的心胸,否則,你會難過得要死,在中國的目前的設計理念下;M
3,如果確信你是喜歡的,那麼開始吧。從最簡單的靜態界面開始,你可以試著給自己做一個個人主頁,剛開始,多多模仿國內外的優秀作品,學習他們的配色,觀察他們實質,諸如風靡中國的韓國設計風,他們統一的風格,自然有他們的道道可以尋找,很多人已經總結過了,我在這里不贅述;X
4,激情很重要,問問你身邊的優秀網頁設計師,他們做到興頭上,是廢寢忘食的,我很多時候,好幾天不出門的做一個網站,無心睡眠,做夢的時候都是在設計,都是在思考,有時候,回到現實中,杯子打碎了,我會想沒關系,只要按一下Ctril+Z撤銷,它就會恢復原狀……D
5,自學是最好的辦法,當然關鍵時刻需要點撥,這時你需要有志同道合的朋友,和你討論,和你分享,這時,你會發現你的進步飛速;
6,試著做一些商業的網站,不可以忽視任何一個小問題,不可以應付,把每處做到最完美,那就是最完美的作品,理論是這樣的,當然這也許在你眼裡的完美,不一定每個人認同,但是慢慢會有更多人認同的;
7,設計,是要參考的,是可以能會去抄襲的,但不是照搬。
8,觀察生活,讓你的生活中的點滴,成為你的靈感。總的說來,太大咧的人,太理工的人是做不好設計的。君不見,那些美麗的網頁上的文字個個煽情,個個斟酌……
9,遇到問題不要急於問別人,先自己用Google、百度搜尋答案。loveyuki的經典名言 :「不要問我,問google」

9、怎麼學好網頁設計?還有怎麼能夠很好得提升這方面的相關能力啊?

相關的軟體 DW PS VS JS這些要掌握 然後就是提高審美能力 只會技術的話 是做不好設計的

10、網頁設計技術如何提高 html+css?

當你的技能達到一定水平的時候,那就是開始修煉內功的時候了。相當於一棵樹長到一定程度,如果它的根沒辦法在生長,就沒辦法吸收更多的養分,也就沒辦法變得更健康,更茂盛,更健壯。你的內功修煉過程可以從兩方面進行:
一、繼續精進技能。
二、借鑒其它領域的思想成果。

一、繼續精進技能。從前端技術人員的層次提高自己到站長的位置,這么一來看問題就會更加全面,更加清晰眼前的路該怎麼走。看看《SEO實戰密碼》,把眼光開闊一下。技能方面的精進,有空逛逛「豆瓣讀書」,多留意上面評分高的優秀書籍,選擇閱讀,有時間可以關注這些優秀書籍的翻譯者的博客,看看他們的思想和介紹,以及在在「豆瓣讀書」的優秀書籍上留下好的評論的那些人的還讀些什麼書。比如:《JavaScript高級程序設計》的翻譯者李松峰的博客就推薦了一些javascript的書籍:
javascript高級程序設計Learning JavaScript(JavaScript學習指南)Learning jQuery 1.3(jQuery基礎教程 第4版)Object-Oriented JavaScript(JavaScript面向對象編程指南)JavaScript:The Good Parts(JavaScript語言精粹 修訂版)javascript模式javascript設計模式編寫可維護的javascript高性能javascriptjavascript語言精髓與編程實踐
這些都是想要精進技能的好書。

二、借鑒其它領域的思想成果。HTML CSS JavaScript都是一些工具,這些工具可以實現我們的日常生活的一些目的,但這些工具包含一些更加高層次的思想,這些思想有好有壞,同時這些思想又是更加高層次的思想的一個組成部分。例如:演算法是軟體的靈魂,JavaScript的演算法不過是軟體的演算法的一部分。《CODE COMPLETE》(中文譯:代碼大全)這本書的目的在於,如果我們見過的一個軟體項目只價值10萬元,那麼走哪些路才能讓我們具備開發10億美元的軟體項目的個人價值。這裡面介紹的就不僅僅是一個軟體的基本語法及實踐,而是一種用工具做到做好一件事情的思想和做法。

至於更加抽象的思想,估計需要各人一步步去探索和使用。例如更加高級的邏輯技能,歸納和演繹。

與提升網頁設計相關的知識