第1章-網(wǎng)頁UI設(shè)計入門

Sketch網(wǎng)站UI設(shè)計（微課版）主講老師：01網(wǎng)頁UI設(shè)計入門目錄03UI設(shè)計的注意事項02網(wǎng)頁UI設(shè)計制作流程01UI設(shè)計發(fā)展史03配色對于UI設(shè)計的影響UI設(shè)計發(fā)展史早期UI設(shè)計發(fā)展史廣告燈箱，在屏幕上閃動的文字和圖片，這些都是可追溯的早期UI設(shè)計。中期UI設(shè)計的興起2000年UI傳入中國，2003年騰訊入股金山公司，使得QQ在外觀和交互方面發(fā)生比較人性化的改變，QQ用戶激增，隨后國內(nèi)各大IT公司開始重視UI設(shè)計。

在2007年中期，iPhone橫空出世。這款產(chǎn)品對UI設(shè)計有重大意義。極具代表性的圓角矩形圖標(biāo)，將擬物化設(shè)計推向整個世界。2009年蘋果公司正式把iphone帶入中國，移動UI設(shè)計開始在國內(nèi)興起。網(wǎng)頁UI設(shè)計流程UI設(shè)計流程明細(xì)產(chǎn)品調(diào)研UI視覺設(shè)計產(chǎn)品技術(shù)開發(fā)Bug測試產(chǎn)品上線產(chǎn)品迭代產(chǎn)品調(diào)研階段產(chǎn)品定位架構(gòu)分析市場分析原型設(shè)計視覺設(shè)計素材靈感搜集確定界面整體色調(diào)確定頁面風(fēng)格布局以及設(shè)計風(fēng)格界面風(fēng)格產(chǎn)品技術(shù)開發(fā)UI設(shè)計師切圖、標(biāo)注，并將圖片輸出。程序員開始按照設(shè)計人員給出的界面設(shè)計圖稿，完成界面的初步代碼變編譯部分。UI設(shè)計師配合開發(fā)，以保證視覺效果還原度及小細(xì)節(jié)修改。Bug測試

開發(fā)工作完成之后，整個項目組會配合測試人員對產(chǎn)品進(jìn)行測試，測試視覺、交互、以及后臺等多方面有無bug并進(jìn)行及時修改。UI設(shè)計注意事項5大原則圖稿一致性圖稿準(zhǔn)確性布局合理化操作合理化系統(tǒng)響應(yīng)時間配色設(shè)計隊UI的影響網(wǎng)頁配色方法網(wǎng)頁主色網(wǎng)頁背景色網(wǎng)頁輔色網(wǎng)頁點綴色網(wǎng)頁配色基本方法根據(jù)產(chǎn)品內(nèi)容確定網(wǎng)頁主色根據(jù)網(wǎng)頁主色確定配色方案網(wǎng)頁色彩搭配技巧同色系指在選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深。網(wǎng)頁色彩搭配技巧鄰色系指在色相環(huán)中相距90度，或者在色相環(huán)上相隔五六個數(shù)位的兩色，為鄰近色關(guān)系。網(wǎng)頁色彩搭配技巧對比色指在24色相環(huán)上相距120度到180度之間的兩種顏色，互