網(wǎng)頁設計的教學設計.doc

網(wǎng)頁的設計教學目標：1、掌握網(wǎng)頁元素和網(wǎng)頁構件的使用：2、能進行簡單的網(wǎng)頁設計；教學重點：網(wǎng)頁構件的使用；網(wǎng)頁設計； 教學難點：網(wǎng)頁的設計； 課時：第1課時導入： 今天我們進入第六章網(wǎng)頁的設計與制作的學習，一個成功的網(wǎng)站不僅僅在于它的內(nèi)容的多少，功能的交互功能多強，設計也是關鍵的一項，它決定了網(wǎng)站的藝術美是否能吸引瀏覽者的眼球。新課：一、網(wǎng)頁元素的組成打開2007年全國中小學信息技術大賽中獲獎作品鄱陽湖白鶴，讓學生觀看并總結網(wǎng)頁的組成元素有？文字、圖片、動畫、聲音、超鏈接等。一般情況下，網(wǎng)頁都應該具備這三種元素，但是也有的網(wǎng)頁只有其中的兩種，甚至只有一種。如有的網(wǎng)頁就是為了展示一篇文章，那么這個網(wǎng)頁就沒有必要放置圖像；有的網(wǎng)頁只用于顯示一幅大尺寸的照片，也可以沒有文字說明；而有的網(wǎng)頁純粹就是提供資料，就不必設置超鏈接，這樣，這個網(wǎng)頁就成為網(wǎng)絡中某一個信息鏈的“終點”，即只有別的網(wǎng)頁鏈接它。過渡：同學們想不想自己也做個網(wǎng)站呢？想做網(wǎng)站前提則是先設計網(wǎng)站，規(guī)劃網(wǎng)站的主題，畫出草圖。二、網(wǎng)頁設計現(xiàn)在給大家5分鐘的時間設計一個學校網(wǎng)站的主頁，內(nèi)容包括網(wǎng)頁的主題、思考內(nèi)容Angel網(wǎng)頁Music網(wǎng)頁怎樣突出的網(wǎng)頁的主題網(wǎng)頁的框架結構及特點以什么色調(diào)為主及作用圖、文有何講究網(wǎng)頁版式設計的視覺因素為了增強人們對網(wǎng)頁的注意程度，提高對于網(wǎng)頁內(nèi)容的理解程度，從而影響人們的思想和行為，我們必須按照人的視覺生理和心理特征，去設計我們的網(wǎng)頁版式，以達到最佳的設計訴求。我們先來看一下人的視線移動規(guī)律：u 人眼的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞。u 視線的變化習慣于從左到右，從上到下和順時針方向運動。u 當視線沿既不水平，也不垂直的斜線方向移動時，在水平方向上下約45o的范圍視線為從左到右移動，在垂直方向左右約45o的范圍內(nèi)，視線為從上到下移動。符合視覺規(guī)律 文字橫向編排 由于人眼的視線橫向移動比豎向移動快而且不易疲勞，因此將文字盡量橫向排布，除非一些有特殊設計要求的版式或書法字體的版式。同時，頁面盡量保持橫向尺寸固定，豎向尺寸不固定，目的是使人們能連續(xù)不間斷地瀏覽頁面。需要注意的是，應避免頁面左右、上下都能滾動，這會給瀏覽者帶來極大的不便。 2重要信息置于“最佳視覺區(qū)域” 在進行網(wǎng)頁版式設計時，要考慮將最重要的信息或視覺流程的停留上安排在注目價值高的位置，這就是“最佳視覺區(qū)域”。由于人們習慣于將視線從左到右、從上到下移動，因而視區(qū)中的不同位置注目程度不同。版面中的不同區(qū)域會產(chǎn)生不同的注目程度，給人的心理感受也不同。它們給人的心理感受也是不同的；上部有輕快、上升、積極、愉悅之感；下部有沉重、穩(wěn)定、壓抑、消沉之感；左側感覺輕松、舒展、自由、主動；右側感覺莊重、局限、拘謹、被動。因此，在進行網(wǎng)頁版式設計時，應考慮將重要信息或視覺流程的停留點安排在頁面的“最佳視域”內(nèi)。 3、避免視覺疲勞 1限制網(wǎng)頁長度盡可能將網(wǎng)頁限制在1屏以內(nèi)，即滿屏，瀏覽者不需要拖動滾動條就可以看到下面的導航信息。頁面不宜過長，一般控制在13屏，盡量不超過5屏。 2文字大小適中、行距合理在網(wǎng)頁設計時應提供瀏覽者定制字體大小的功能。 3位置的一致減少交互的次數(shù)，按照人的閱讀習慣，固定導航的位置。免去用戶去找導航的麻煩。 4適量安排多媒體元素網(wǎng)頁中的動畫不是越多越好，而是要形成動靜相宜的效果，因此需要適量安排多媒體元素，并注意主次關系。 5合理配色如果將大篇幅極亮的文字設計在極暗的背景上，容易因視覺長時間過分緊張而產(chǎn)生疲勞。因此應注意網(wǎng)頁的配色，使其適合瀏覽者長期瀏覽。網(wǎng)頁設計的構成要素（一）、版式設計網(wǎng)頁的版式設計，就是將文字、圖形圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍內(nèi)，運用造型元素和形式原理進行視覺的關聯(lián)，從而將涉及意圖以視覺形式表現(xiàn)出來。版式設計將各元素組合配置，使頁面內(nèi)容一目了然，并獲得悅目的視覺效果。在設計時，需要運用統(tǒng)一、對比、對稱、均衡、節(jié)奏、韻律等形式原理，來構造出和諧、流暢、自然的網(wǎng)頁界面。（展示兩幅體現(xiàn)出對比和調(diào)和的網(wǎng)頁的頁面，讓學生體會。）網(wǎng)頁板式構成的類型：1、骨骼型 也稱欄型，是一種規(guī)范的、理性的設計形式，類似于報刊的板式。常見的骨骼型有豎向的和橫向的通欄、雙欄、三欄、四欄等，這種版式給人以和諧、理性的美。這種版式常用于公司網(wǎng)站的設計。（展示頁面，學生意會）2、國字型 口字型、同字型、回字形都歸屬于此類，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題、導航以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。這種布局的優(yōu)點是充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活。（展示頁面，學生根據(jù)設計理念分析優(yōu)缺點，重點分析）3、框架型 有左右框架型、上下框架型和綜合框架型，這種版式常用語功能型的網(wǎng)站，如郵箱、論壇、博客等（展示頁面，學生意會）4、中軸型 沿頁面的中軸將圖片、文字做水平或垂直方向的排列，給人穩(wěn)定、平靜、含蓄、舒暢的感覺。（展示頁面，學生意會）5、 “匡”型布局或“T”型 布局可歸于此類，“匡”型布局中，常見的類型有上面是標題與導航，左側是展示圖片的類型和最上面是標題及廣告，左側是導航鏈接的類型?！癟”布局就是指頁面頂部為橫條網(wǎng)站標志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單背景色彩較深，整體效果類似英文字母“T”，我們稱之為“T”形布局。這種布局的優(yōu)點是頁面結構清晰，主次分明，是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人感覺枯燥無味。 6、 圖片或文字在頁面上作流線的編排構成，產(chǎn)生韻律與節(jié)奏。焦點型、滿版型、分割型、拐角型、流線型、對稱型等等。（展示頁面，學生意會）（二）、色彩搭配頁面的色彩設計，直接影響閱讀者的觀賞興趣，彩色的網(wǎng)頁總是勝于單色的網(wǎng)頁，網(wǎng)頁也是一件藝術品，因為它既要求文字的優(yōu)美流暢，有要求頁面的新穎、整潔，使用色彩可以產(chǎn)生強烈的視覺效果，是頁面更加生動。所以我們在制作時一定要先確定網(wǎng)站的主題色，以下介紹幾種色調(diào)。1、同類色 比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區(qū)別。它起到色彩調(diào)和統(tǒng)一，又有微妙變化的作用。第一眼看上去給人溫柔、雅致、安寧的心理感受，便可知該組同類色系非常調(diào)和統(tǒng)一。只運用同類色系配色，是十分謹慎穩(wěn)妥的做法，但是有時會有單調(diào)感。添加少許相鄰或對比色系，可以體現(xiàn)出頁面的活躍感和強度。2、暖色，如圖中的黃色，橙色，紅色，紫色等都屬于暖色系列。暖色系的飽和度越高，其溫暖特性越明顯?？梢源碳と说呐d奮性，使體溫有所升高。暖色跟黑色調(diào)和可以達到很好的效果。高明度高純度的色彩搭配，把頁面表達得鮮艷炫目，有非常強烈刺激的視覺表現(xiàn)力。冷色，如圖中的綠色，藍色，藍紫色等等都屬于冷色系列。冷色系亮度越高，其特性越明顯，能夠使人的心情平靜，清爽。冷色一般跟白色調(diào)和可以達到一種很好的效果。 3、冷暖色與此同時，在一個環(huán)境、區(qū)域范圍里，色彩的屬性、性能特性是相對的。例如黃色在藍色、綠色這兩個區(qū)域環(huán)境下，黃色可以說這個時候是呈暖色，而出現(xiàn)在桔紅、朱紅、深紅這幾個區(qū)域環(huán)境下，黃色可以說在這個時候是呈冷色。同樣的，藍色相對綠色是冷色，紫色相對藍色是暖色等等?？筛鶕?jù)網(wǎng)頁設計主題的目的要求，環(huán)境協(xié)調(diào)度的需要等等做相應的搭配調(diào)整。 色相對比 色相對比是指因色相之間的差別形成的對比。要增強色彩的表現(xiàn)力，當主色相確定后，必須考慮其他色彩與主色相是什么關系，要表現(xiàn)什么內(nèi)容及效果。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。 明度對比 明度對比是色彩明暗程度的對比，也稱色彩的黑白度對比。兩種不同明度的色彩并列時，會使明色更亮，而暗色更暗。將同明度的灰色置于白底和黑底上，會感覺黑底上的灰色較亮；而白底上的灰色明度較暗。 純度對比 純度對比是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復色其本身純度偏低而屬低純度的色彩范圍。 冷暖對比 冷暖對比是指不同色彩之間的冷暖差別形成的對比。色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。冷暖對比的應用，通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。將這兩個色系的色彩安排在同一畫面時，其對比效果極為強烈。 面積對比是指兩個或更多色塊的對比，這是一種多與少、大與小之間的對比。面積的對比，可以是中高低明度差的面積變化及中高低純度差的面積變化。同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。 同種色的調(diào)和同種色的調(diào)和是相同色相、不同明度和純度的色彩調(diào)和，使之產(chǎn)生秩序的漸進，在明度、純度的變化上，為了不至于讓整個頁面呈現(xiàn)過于單調(diào)平淡，有些頁面則是加入極其小的其它顏色做點綴。該頁面使用了同種色的綠色系，淡綠、草綠、墨綠通過明度、純度的微妙變化產(chǎn)生緩和的節(jié)奏美感。色彩的心理效應色彩給人的感受是豐富而奇妙的。色彩的心理效應源于人們的生活經(jīng)驗。每個人對相同的網(wǎng)頁色彩的感受可能有差異，不同的色彩對人產(chǎn)生的心理效應更不同。不同地域、文化、年齡、性格、興趣等異同因素，是決定色彩感受異同的根源。在這里從人類社會數(shù)年來的發(fā)展所有的高級情感的角度來談一下不同色彩的象征意義和心理暗示。l 網(wǎng)頁主色調(diào)是綠色，鋪蓋面積比較大。由于高亮度的顏色會給人過輕、沒分量的感覺，因此設計師采用起輔助效果的黑色，鎮(zhèn)住輕飄的感覺，起到了很好的平衡作用。如果黑色出現(xiàn)在左上角，會和高亮度的綠色產(chǎn)生很強的對比，不適合以健康為主題的表達，設計師把深綠色放置在右上角，形成色彩均衡的做法是十分明智的。l 主色調(diào)是掌握整個網(wǎng)頁色彩氣氛的主要因素，而輔色面積小，起強調(diào)或緩沖調(diào)和的作用。起強調(diào)作用的輔色是空間中動感和活力的來源，還可以因其色彩“點”的作用使主色在整個網(wǎng)頁中得到連貫。輔色一般為醒目突出的色彩。網(wǎng)頁配色準則色彩和所表達的內(nèi)容氣氛相適合，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關聯(lián)。所使用的色彩產(chǎn)生的聯(lián)想不能與所表達的基調(diào)相違背。遵循色彩適應性原則，避免可能發(fā)生的視覺混淆。配色的運用因人而異，主要為追求色彩的和諧與穩(wěn)定。 背景與文字 如果一個網(wǎng)站用了背景顏色，必須要考慮到背景顏色的用色與前景文字的搭配等問題。一般的網(wǎng)站側重的是文字，所以背景顏色可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，讓人一目了然。為了讓瀏覽者對網(wǎng)站留有深刻的印象，有些網(wǎng)站設計了獨特的背景1、同類色調(diào) 同類色調(diào)能增強網(wǎng)頁的統(tǒng)一效果。網(wǎng)頁中基調(diào)有大面積的同類色產(chǎn)生，改變同類色彩的明度、純度構成千變?nèi)f化的色彩效果。2、藍色調(diào) 強調(diào)精密性、穩(wěn)重型、科技型的網(wǎng)站，多采用藍色調(diào)。因為深藍色傳達清高的感情色彩，是科技時代的代表色彩。（附網(wǎng)頁，學生意會）3、動感色調(diào) 娛樂、體育、兒童網(wǎng)站等多數(shù)需要表現(xiàn)出活潑、動感的視覺效果，盡量是用鮮艷的顏色會穩(wěn)妥些，避免使用嚴肅、莊重的黑色，加入一些白色，會是頁面具有單純、明亮的感覺。（附網(wǎng)頁，學生意會）4、時尚色調(diào) 表現(xiàn)時尚感，可以采用冷色調(diào)，并搭配少量暖色作為點綴，當頁面色彩過于豐富時，可以通過白色來緩解。（附網(wǎng)頁，學生意會）5、高雅色調(diào) 這類網(wǎng)站可用紫色、褐色、土黃色等來營造高雅氛圍。 對比色的調(diào)和 對比色的調(diào)和方法有：提高或降低對比色的純度，在對比色之間插入分割色（金、銀、黑、白、灰等），采用雙方面積大小不同的處理方法，對比色之間加入相近的類似色。黑色在繪畫和藝術設計中它是可以與任何顏色相配的極色。它體現(xiàn)了高貴、高雅、消極、悲傷、沉穩(wěn)、沉悶、死亡、邪惡、明確和堅定。網(wǎng)頁設計中黑色的使用常常能達到四兩撥千斤的作用，使與之鄰近的界面信息成為視覺的焦點。白色與黑色相對的顏色，同樣也是極色，可以與任何顏色相配。它常給人以“純潔的、完美的、正義的、不可觸及的、不可接近的、不可解釋的、整潔的、神圣的、空洞的、無限的、沉默的”等心理暗示?；疑彩且环N可以與任何顏色相配的顏色?；疑纳室庀?，在商業(yè)設計中，灰色具有柔和，高雅的意象，而且屬于中間性格，男女皆能接受，所以灰色也是永遠流行的主要顏色，使用灰色時，大多利用不同的層次變化組合或他配其他色彩，才不會過于素、沉悶，而有呆板，僵硬的感覺。 紅色 在繪畫和藝術設計的范疇里，紅色往往給人以力量、生活的愉悅、高強度的感覺。紅色傳達著熱量、魅力、友好、喜慶和個人魅力。紅色有些時候用來做心理上的警示。 2.藍色藍色在視覺上往往給人一種被動、靜謐、深邃、寒冷、潮濕、謹慎、憂郁、宗教、科技、冷靜與理智的感覺。瑞士的兩個色彩心理學專家對藍色已有以下定論:一種透徹的、女性化的顏色，可以制造安靜、松弛的氣氛。反之，它會引起人夢幻、童話、整潔、清爽的感覺。3.黃色 人們常常通過黃色聯(lián)想到:太陽、溫暖、自由、年輕、快樂、開放、奇特、樂觀等等。人們使用黃色往往是在心理上尋求一種朝氣和活力、自主、自由不被拘束、幸運而舒適的感覺。 4.綠色 綠色常使人聯(lián)想起自然、和諧、安靜、堅定和生命。綠色具有黃色和藍色的某些特征，色環(huán)上綠色偏近黃色時，綠色就變得溫暖、稚嫩、活潑、健康而無危害性。如果再加進一些白色，就會給人以一種女性的柔和與輕盈的感覺。 5.橙色 橙色也像綠色一樣具有其他兩種原色的特征。橙色常給人的感覺是:快樂、開放、大方、親密、直接、熱烈、溫暖、秋天、無拘束、有活力和感情洋溢。人的行動在橙色的氛圍里沒有任何拘束，因此橙色很大程度上代表了溫暖和真摯的感情。 6.紫色 紫色令人聯(lián)想到昏暗、神秘、深刻、內(nèi)向、高貴、悲傷、禁止、魅力、曖昧、不可靠等等。它也同綠色、橙色一樣，具有相鄰的兩個原色的部分特征。紫色越深，則反映出的效果越呆板、嚴格、不近人情，并給人以強烈的神秘感。 7.棕色 它常被人視為一種堅固的、誠實的、親切、穩(wěn)定和安全的顏色。它讓人聯(lián)想到腳下的土地、結實耐用的物件、動物皮毛的溫暖、幾近于平淡和無聊、隨和、豪放、古典與懷舊、愛的嚴肅和值得信賴。（三）、文字的編排與設計要達到網(wǎng)頁文字傳達的有效性，必須重視文字編輯的整體效果，是網(wǎng)頁文字能給人以清晰的視覺印象，避免頁面繁雜零亂，減去不必要的轉世變化，使人易認、易懂、易讀。網(wǎng)頁文字的設計不能為了藝術造型而編輯，忘記了文字本身是傳達內(nèi)容和表達信息的主題。網(wǎng)頁字體與字體編排在網(wǎng)頁設計中，字體的處理與色彩、版式、圖形等其他設計元素的處理一樣非常關鍵。從藝術的角度可以將字體本身看成是一種藝術形式，它在個性和情感方面對人們有著很大影響。網(wǎng)頁文字設計技巧 1.提高可讀性 （1）讓你想表達的內(nèi)容清晰、醒目，讓瀏覽者一開始就可以明白你的意思。（2）避免使用不清晰的字體，否則容易使閱覽者產(chǎn)生反感和麻煩。（3）注意恰當?shù)倪x擇你所需要的字體，適當采用虛實對比、大小對比。（4）注意文字編排方向，注意安排閱覽者的視線，適當運用直線與曲線編排。（5）根據(jù)視覺流程的原理，通常將重點放在右邊。 2. 精于位置 （1）注意文字的對齊、適當拉來間距、適當安排行距。（2）注意圖文交錯，既不要影響圖形的觀看，也不能影響文字的閱覽。（3）文字不要頂天立地，也不要支持邊角 3. 營造視覺美感 文字作為網(wǎng)頁形象要素之一，具有傳達感情的功能，因而它必須具有視覺上的美感，能夠給人以美的感受。字型設計良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心理反應。反之，則使人看后心里不愉快，視覺上難以產(chǎn)生美感，甚至會讓觀眾拒而不看，這樣勢必難以傳達出作者想表現(xiàn)出的意圖和構想。注意改變文字的位置和大小，適當調(diào)節(jié)字間距。對于段落文字的處理應注意，字體加大后，段落之間的距離也應該隨之調(diào)整。小字體同樣應用這一規(guī)則，不過是相反的。 4.富于創(chuàng)造性 設計時，應從字的形態(tài)特征與組合上進行探求，不斷修改，反復琢磨，這樣才能創(chuàng)造出富有個性的文字，使其外部形態(tài)和設計格調(diào)都能喚起人們的審美愉悅感受。加入感受在字體里面，對文字的大小、間距、透明度做些調(diào)整，就會是完全不同的效果了。差別就在這里，也許只是一點小改動，但是需要你思考的卻更多。有時候對文字的筆畫做特殊的加工處理往往會產(chǎn)生一些意想不到的效果。而這樣的處理是帶有創(chuàng)造性的，同時人性化的味道也會更濃一些。這是電腦字體所無法替代的效果，帶給觀看者的感受自然會要強烈的多。網(wǎng)頁文字設計方法 筆畫突變 筆畫突變是指在局部的某個或者某些筆畫上采用不同于正常筆畫的形態(tài)造型，突出文字內(nèi)涵和特征。 添加形象添加形象主要是通過在漢字局部筆畫上添加與漢字表義相關的圖像或圖形來增加漢字的表意功能。將某個筆畫換成有意義或有趣地圖形，會使整個視覺活躍起來，海爾網(wǎng)頁中“火”字的設計 。 . 筆畫連接 筆畫相連是通過一組文字筆畫上的連貫來表達文字間的關系，增強一組文字的視覺感染力。 會意及象形 會意及象形是指通過對所設計的漢字字意的深刻內(nèi)涵加以挖掘，以象形或者會意的形態(tài)來傳達文字的信息 。 表面裝飾 字體的表面裝飾是通過對文字筆畫的局部或者整體裝飾，來增強文字傳達的效果和感染力。 （四）、圖形圖像的創(chuàng)意與設計圖形圖像能將信息傳達得更具體、真實、直接、易于理解，從而高效率高質(zhì)量的表達設計理念，使網(wǎng)頁充滿強烈的感情色彩。在網(wǎng)頁中合理的應用圖形圖像，能夠形成視覺信息的中心，有利于重要信息的傳構成要素點、線、面點、線、面是平面設計的基本元素和主要視覺語言，是一切構成設計中最基本的造型要素，存在于任何造型設計之中。作為視覺形式的語言，構成網(wǎng)頁設計圖形圖像的最基本的要素是點、線、面，通常被人們稱為“構成三要素”。在網(wǎng)頁設計時，運用組合、對比、均衡、節(jié)奏、統(tǒng)一等構成方法將它們進行安排，互相補充，互相襯托，就可以創(chuàng)造出形式多樣，引人注目的網(wǎng)頁，從而將網(wǎng)站的信息有效地傳達給瀏覽者。 1.點 點必須要以視覺的表現(xiàn)為前提，因此點是一種具有空間位置的視覺單位，而且有大小不同的面積和不同的外觀特征以及屬性。點可分為規(guī)則點和不規(guī)則點兩類，如圓點、方點、三角點屬于規(guī)則點，而鋸齒點、泥點、雨點則屬于不規(guī)則點。 點無一定的大小和形狀，點的概念是相對的，是與周圍的視覺元素相比較而言的。只要與周圍其他造型要素共同比較時具有凝聚視覺的作用，都可以稱為點。點的判斷完全取決于它所在的空間的相互關系上面，越小的形體越能給人點的感覺，點的面積變大就成了面。 2.線 任何形態(tài)都可以通過線的界定而確定下來。因此在網(wǎng)頁設計中，線的布局安排主要體現(xiàn)在線的空間分割上。線的分割產(chǎn)生各種比例的面。在利用線進行頁面分割時，既要考慮各形態(tài)元