整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好！我是一名UX設計師，希望可以與共同喜歡探索用戶體驗的朋友們一起成長！我會不定期地更新一些有關用戶體驗方面的文章。本文主要分享：無需ui和前端制作個人網站，只需一個Axure就能搞定！
越來越多的人想要創建自己的個人網站，把自己平時工作的總結和收藏分享出來，整理到自己的個人網站中，不僅能幫助同行互相學習，更是自己能力的體現。我自己用axure做了一個個人網站，以本網站為例，來為大家講解如何用axure做出高保真的個人網站。
如果后期維護量較頻繁的，還是建議正常開發網站，并且需要有后臺進行日后維護。axure制作網站只適合維護量較小且簡單的網站。
在正文開始前，先給大家看一下網站的效果（http://uxgao.com），覺得不錯的童鞋可以繼續往下看哦！
所謂的后臺維護指得就是需要開發一個官網后臺，日常通過后臺上傳新文章、新內容等信息。axure只能做出展示效果，所以該場景下不適用axure制作網站。
首先axure制作的網站導出的html文件較大，相比正常前端開發出來的網站要大好多。如果網站整體頁面較多，或單獨某一個頁面內容／圖片較多。網站加載較慢，所以該場景下不適合用axure制作網站。
現在大多數復雜的動效和交互都是用h5、css3做的，過去我們可能還會看到網站上有flash或AE做的動效。目前大多數都是用flash、AE做出效果后，前端轉換成代碼實現。從而讓網站瀏覽更加流暢。如果再axure里加復雜的動效和交互，那么絕對會影響網站的加載速度，從而大大降低了網站的瀏覽效率。
本網站做的效果是內容區域寬度固定，背景寬度自適應。
（1）內容區域寬度
考慮到主流的顯示器分辨率，我設置的內容區域寬度為1200px。所有內容和圖片都要放在這1200px以內。可在頁面中拉一個參考線，拉到橫坐標1200的位置。在做設計的時候從最左側開始就可以了，不需要給左側留出空間，下一條會講到頁面居中的方法。
（2）整體頁面居中
之所以上一條說到不給左側留空間，是因為我們要把頁面設置成居中對齊。選擇項目－頁面樣式編輯，在頁面排版中選擇第二個，居中對齊。選擇這個選項后，在axure畫圖時頁面依然是在最左側，在瀏覽器預覽時整個頁面就會居中顯示。
（3）背景寬度自適應
如果網站一個頁面的背景都是同一個顏色，那么直接在當前頁面點擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。
如果一個頁面不同模塊有不同的背景色，那么我們需要用動態面板來實現。首先拉一個動態面板，高度設置到你需要的高度，寬度隨意，不過為了方便在這個模塊上加內容，建議寬度拉倒跟網頁內容寬度一樣，比如1200px。然后在樣式里設計你需要的背景顏色，然后勾選100%寬度。在瀏覽器預覽后，該模塊的背景色就是自適應各個分辨率了。
我做的導航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因為頁面內容較多時，用戶滾動到下面后，直接就可以看到導航并進行操作。
制作過程：
（1）拉一個動態面板，導航的高度即為動態面板的高度，寬度拉到1200px。（寬度一定要拉倒內容區域的寬度，因為要在動態面板里面放導航的內容）
（2）設置動態面板背景顏色（即為導航背景顏色），勾選100%寬度。
（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒有其它內容需要覆蓋在導航上就勾選上，我的導航右側有一個二維碼需要覆蓋在導航上，所以我的沒有勾選。（沒有勾選的要注意設計完所有頁面時，要把導航的動態面板放到圖層最上層。）
導航文字：導航的文字需要放在動態面板里，文字需要有3種狀態，當前頁面狀態、鼠標懸停狀態、正常狀態。
banner的圖是整個網站中最大的圖片，這里不建議大家直接把banner圖放到axure文件里，既不能自適應，又影響了加載速度。
純色背景banner制作過程：
非純色背景banner制作過程：
所有可點擊的圖形按鈕、文字按鈕都需要有3種狀態，正常狀態、鼠標懸停狀態、鼠標按下狀態。
在屬性－交互樣式設置中設置鼠標懸停和鼠標按下的效果。
我做的二維碼效果是鼠標懸停在導航右側二維碼圖標時，由上向下推出二維碼，鼠標離開時，由下向上收回二維碼。
制作過程：
（1）拉一個動態面板里面放二維碼圖片，放到圖標下面的位置上。
（2）選擇固定到瀏覽器，水平固定選擇居中（根據網站尺寸，調整邊距），垂直固定選擇上，勾選始終保持頂部。
（3）給導航動態面板中的二維碼圖標加兩個事件，如圖：
網站中有一些文章、推薦等模塊，點擊后跳轉的是非本網站中的鏈接，我們需要對可點擊的區域加點擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：
1. 能用文本盡量少插入圖片
比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進來。嘗試用axure進行排版。
2. 注意細節
既然是高保真，就不能做的像低保真那樣粗糙，整個網站的字體、字號、間距、顏色等細節問題。都要像ui設計一樣注重細節。
3. 交互效果統一
可點擊的區域，比如文章，鼠標懸停的時候要有一個變化，比如外發光、描邊等效果。要遵循設計原型，給用戶每一個操作都有及時的反饋。
4. 圖片壓縮
盡量把用到的每一張圖都進行壓縮，前提是保證圖片質量不會被看出來降低。
5. 購買域名
這個大家可以自行選擇，去騰訊云、阿里云購買，哪個便宜買哪個。域名后綴盡量選擇常見的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來選擇。
這個我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網搜一下。不用花錢買服務器，這里有一個注冊與使用的教學希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332
上傳完去域名后臺管理解析一下就可以嘍！
作者：高杰，微信號公眾號：UX設計師高杰，從事交互設計和用戶體驗工作。
本文由 @高杰 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
天的主題是網頁編程中的水平線。
同學們好，今天我來分享一些免費的少兒編程知識。只要每天堅持學習一行代碼，你也可以成為編程高手！今天我們要學習如何在HTML中插入一條水平線，使用的是HR標簽。HR是一個自閉合標簽，雖然它沒有標準的屬性，但我們可以通過CSS來控制它的外觀。
先來看看我們的實例效果。在頁面上，兩行文字被一條直線分開。這條直線就是HR標簽，效果已經展示出來了。現在我們來看看實現的代碼。HR標簽的寫法非常簡單，但在最開始的時候，它有四個屬性，現在已經不被標準支持了。盡管如此，我們仍然可以使用它。
今天的實例中，我們已經將這些標簽加入到了代碼中。如果你感興趣，可以查看下方的代碼。按下空格鍵可以看到過時的屬性不會被智能提示，但這并不影響代碼的正確性。將注釋取消后保存，然后回到瀏覽器刷新，可以看到屬性仍然有效。線條的高度為3，寬度為400，并且居中顯示。取消陰影后，線條將變為純色。
這只是一個演示，你可以參考一下。從這個示例中，我們可以看到，HR標簽的寬度是根據頁面寬度自動調整的。當它的寬度達到整個瀏覽器時，它會自動換行。既然屬性已經過時了，那么我們如何通過HTML來控制外觀呢？CSS是我們今天要學習的內容。
先取消注釋的代碼，讓HTML失效，然后保存。回到瀏覽器刷新，就可以看到線條變成了藍色。
今天的分享就到這里，希望各位同學可以試著寫三遍，不需要看視頻也可以掌握這個技巧。如果你需要案例和相關文檔，可以向我咨詢。
我們下期再見，想學習編程的同學記得關注哦。
天分享 7 個冷門好用的在線工具，每一個都是自己精心挑選，每一個都足夠驚艷，讓你眼前一亮。
https://chartcube.alipay.com/
ChartCube 是螞蟻金服數據可視化研發團隊出品的一個在線圖表制作工具，它讓你只需要三步簡單的操作，就可以快速制作出一個精美的圖表。
它不需要登錄注冊，完全免費，操作簡單，功能強大，不僅支持導出圖表，還支持導出其它文件。
它整體體驗下來非常流暢好用，值得嘗試。
首先，第一步，你需要選擇一個合適的圖表，它按照圖表類型和分析目的對圖表進行了詳細的分類。
每個圖表都是非常精美。
圖表類型分類包括：折線圖類、條形圖類、柱狀圖類、餅圖類、面積圖類、雷達圖類。
分析目的分類包括：比較類、占比類、趨勢類。
選擇完圖表，我們進行第二步配置圖表，這里支持的配置包括：畫布尺寸、標題、副標題，圖例方位、水平位置，圖形數據、圖形屬性、高度、寬度等。
它支持三通配置，包括圖表、數據、配置三個畫板，不管你在哪個畫板做了修改，其它畫板對應的選項也會同步變化。
它支持直接拖拽圖形元素，讓你配置圖表變得如此簡單有趣。
它還支持導入先前的配置文件。
最后完成配置，我們可以直接導出圖表；它支持導出多種內容，包括：圖片、數據、代碼、配置文件。
導出圖片包括：PNG 、SVG 、JPG 三種格式文件，導出數據是 CSV 格式文件，導出代碼包括 JS 和 HTML 格式文件，你也可以直接復制代碼內容。
配置文件下次可以再次導入到 ChartCube 中進行編輯操作。
https://jm.wps.cn/
極墨 PPT 是金山 WPS 出品的一個在線 PPT 制作網站，它讓你只需要簡單的操作，就可以輕松制作出精美的 PPT 。
它目前完全免費，仍處于內測版本，但是整體使用下來已經足夠讓人驚艷。
進入網站，我們需要進行登錄，點擊新建按鈕，我們可以看到網站免費提供了很多精美的 PPT 模板，并且進行了詳細的分類，包括：年終總結、答辯、宣傳介紹、商業計劃、述職報告、課件、發布會、簡歷、競聘。
選擇任意一個 PPT 模板，我們就進入了編輯界面。
我們不需要在 PPT 圖片模板上編輯，直接在 PPT 模板下方的編輯界面就可以編輯內容，這里不僅可以編輯文字，還可以編輯圖片。
編輯完畢，點擊刷新按鈕，我們會發現 PPT 上的內容已經同步修改，并且文字和圖片的位置不會變化，圖片的大小也不會發生改變。
它最讓我驚艷的是它的智能排版功能。
它支持對某一頁 PPT 進行智能排版，點擊智能排版按鈕，網站會自動 AI 識別你的內容，給出很多個同種風格但是不同樣式的排版方案，你可以隨意挑選，直接替換，讓你的 PPT 變得無限可能。
它的智能排版功能不僅支持純文字智能排版，還支持添加圖片智能排版，你可以添加一張或多張圖片，網站同樣會自動生成多個圖文混合排版方案。
我們點擊網站右上方的更換風格可以重新選擇 PPT 模板，點擊右上方的播放按鈕可以直接播放 PPT ，全屏演示 PPT 。
我們編輯完畢，可以直接導出 PPT 為 PPTX 格式，這個格式可以兼容任何版本的 Office 。
最后，這個網站目前仍處于內測階段，很多功能有待完善，很多功能也還在開發，但是目前而言，就可以讓你花少量的時間、少量的精力制作出不錯的 PPT 。
https://www.sjtiantang.com/
設計天堂是一個免費的設計素材下載網站。
它支持下載的素材包括：PPT 模板、簡歷、圖片、字體，其中 PPT 模板分類包括：動態模板、節假節日、論文答辯、相冊圖集、求職簡歷、晚會頒獎、總結匯報、商業計劃書、企業宣傳、教育培訓、商務通用、婚禮愛情。
你不僅可以利用網站的分類功能找到自己需要的素材，還可以利用網站的搜索功能搜索自己需要的素材。
https://shulijp.com/
簡捷工具是一個實用的多功能聚合網站。
它提供的工具分類包括：文字工具、圖片工具、自媒體工具、計算工具、數據資訊、開發工具。
它提供了很多實用的具體工具，包括：短視頻批量去水印、證件照改背景、手寫文字識別、圖片無損放大、黑白圖片上色、圖片壓縮、圖片對比度增強、圖片變透明格式、二維碼生成解碼。
它支持一鍵更換證件照的背景顏色，并且提供白色、紅色、藍色三種底色供你選擇，你可以直接上傳你需要處理的證件照，選擇任意一個底色就可以開始處理，處理效果比較出色。
https://taira-komori.jpn.org/freesoundcn.html
小森平的免費音效下載是一個完全免費并且非常良心的音效下載網站，它的作者是日本的一個音效制作者。
它提供的音效可以免費用于你想用的項目，可以用于商業加工，可以用于工業產品。
它提供了豐富并且全面的音效，進行了詳細的分類，包括：日常生活、游戲動畫片、體育大會學校、魔術幻想、飯菜吃飯廚房、格斗打擊、街環境聲音、開關、摒棄爆炸、交通工具、自然季節昆蟲、恐怖、噪音空調、人動物腳步聲、樂器。
它的每個分類提供了很多個具體音效，你不僅可以在線試聽，也可以直接下載。
https://wallroom.io/
Wallroom 是一個不可多得的精品電腦壁紙網站。
它所有的壁紙都是站長人工收集上傳，每一張壁紙的質量都是非常出色，每一張壁紙也都是非常唯美。
它的所有壁紙都可以免費下載。
它提供了多種分辨率的壁紙，從 1920 到 8K ，包括：1920 、2560 、2880 、4K 、5K 、8K ，你可以根據自己的需求下載對應分辨率的壁紙。
http://www.webhek.com/misc-res/species-in-pieces/
30 個 CSS 碎片拼圖是一個唯美精致并且非常具有價值的網站，它通過 30 個 CSS 碎片拼圖展示了 30 種瀕臨滅絕動物。
它的每個 CSS 碎片拼圖，展示了一種瀕臨滅絕動物的樣子，配上純色的背景，舒緩的背景音樂，唯美的動態效果，帶給你強烈的視覺沖擊。
它非常具有教育價值，每一個展示頁面都有一個 “它們有什么危機” 按鈕，你可以點擊它了解這些動物瀕臨滅絕的原因。
最后，我們除了欣賞，還可以截圖保存這些唯美精致的圖片用作電腦桌面壁紙。
下面我簡單展示幾個 CSS 碎片拼圖，每一個都是精致唯美。
轉自：微信公眾號 木子淇
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
