網站界面ui設計工具

1、一般ui設計使用的設計工具有哪些

UI設計軟體相關的技術
學習UI圖形界面設計，常用的幾個軟體分別是
一、Photoshop
二、Sketch
三、藍湖
四、Axure

2、網頁界面設計工具有哪些

工欲善先利其器，網頁界面設計過程中要運用很多工具，藍湖、PS、Sketch、AI、Axure 這些差不多能囊括其工作的方方面面。

3、有什麼可視化設計web界面的工具

1、dreamweaver——集WEB端網頁設計和網站管理於一身的所見即所得網頁編輯器
2、Axure——原型設計工具，主要設計WEB原型
3、墨客——原型設計工具，對PC端和WEB端都很友好

以上這幾款使用率都比較高，最近幾年用Axure原型設計的較多。DW工具比較早。

4、UI設計和網頁設計的區別？

要想了解這兩者的區別，就先來看看他們的定義是什麼。UI設計是指軟體的人機交互、操作邏輯、界面美觀的整體設計，用自己的話來說就是設計軟體和用戶的互動方式。而網頁設計是根據企業希望向瀏覽者傳遞的信息，進行網站功能策劃，然後進行的頁面設計美化工作。現階段的UI設計，通常來說是一定程度上包含了網頁設計的內容的，目前的UI設計面向的方向很廣泛，除了UI設計，還包括了網站管理、網頁設計、交互平台設計、app移動界面設計、用戶體驗、產品設計、電商包裝設計等。而網頁設計通常來講是專門負責網站中各個頁面的設計。而網頁設計中，最先提到的就是網頁的布局。布局是否合理、美觀，將直接影響到用戶的閱讀體驗及訪問時間。

總之，UI設計包含有網頁設計的內容，但是網頁設計是一種更專業的網頁界面、布局等設計。

5、好用的UI設計工具有哪些？求高手推薦

按UI的工作流程推薦一波：
一、項目前期准備：流程圖工具-Visio
在正式進行UI界面設計之前，UI設計師需要對產品整體的流程進行思考。此階段可以使用流程圖軟體Visio或XMind對需求的流程進行梳理，這會給後期的溝通減少很多不必要的麻煩。
二、原型設計工具-Mockplus

相比老牌原型工具Axure，Mockplus是一款簡單、便捷的國產原型工具，可以快速將你的想法以線框圖形式展現出來。軟體內封裝好了常用的一些組件及素材圖標，拖出即可用，非常方便。同時Mockplus也支持多人協作設計 。
三、矢量繪圖工具-AI

AI是目前最強大的矢量圖繪制工具之一，主要應用於印刷出版、海報排版、專業插畫、多媒體圖像處理和互聯網頁面的製作等。支持任意形狀漸變、全局編輯、自定義工具欄、裁切視圖、內容識別裁剪等特色功能，非常實用。
四、劃參考線工具-GuideGuide
GuideGuide是一款可以應用於PS、AI、Sketch及XD裡面的劃參考線插件，安裝非常方便。此外，它支持一鍵生成參考線，也可針對畫布或者自定義選區新建參考線等。
五、UI界面設計工具-Sketch
Sketch可以說是一款專為UI設計師而生的矢量繪圖工具。相對於PS，SKetch定位更加精準，操作更簡單及輕量化。「設計，修改、演示」的一站式功能，可以幫助UI設計師快速完成界面設計，元素批量修改及快速演示等。但是目前只支持在Mac上使用。當然，沒有Mac的，也可以用PS或XD進行界面設計。
六、配色工具- Material Design Color
對於UI設計師來說，配色是極其重要的一個環節，有人稱之謂「成也配色，敗也配色」也不為過。一個好的UI配色可以起到諸多作用，如：顯示界面整體架構、明確層級關系及提升轉化率等等。其重要性可見一斑。而配色一直是讓UI設計師非常頭疼的，對於新手小白更是如此。當然，有了配色工具-Material Design Color，這些問題都不用愁。其操作非常簡單，便捷，靈活。
七、標注、切圖、高保真原型工具-摹客iDoc
UI設計師做好界面設計後，就到了最讓人惱火的環節了-如何將自己的設計稿快速交付（標注、切圖、高保真原型等）給前端開發？用摹客iDoc的插件，就能輕松標注和切圖，幫助設計師快速完成交付。支持sketch、PS、XD的設計稿和Axure、Mockplus的原型圖。
八、圓角工具-Corner Editor
這是一款在PS上運行的插件-圓角工具。與PS裡面的自帶圓角編輯功能相比，Corner Editor操作起來更加簡單便捷。除了可以單獨設置圓角大小外，就算元素變形了，一樣可以進行圓角處理。
以上是我的推薦，望採納~

6、七個網頁界面ui設計細節你掌握了嗎

素馬主張任何高大上的產品概念設計最終落地都化解為版式與圖片。隨著用戶對產品使用的體驗要求越來越高，新銳的版式加上精美的圖片，還需要加上獨特的動效設計（前端製作工藝）才行。那麼，除了網頁設計三大塊版式、圖片、動效外，我們這些看似搬磚，每天做細節設計的ui設計師，是否有大的研究和作為呢。今天分享的這篇文章，主要是針對ui界面中非常細小的設計技巧進行講解。

01

-

使用色彩和字重來創造層次結構，而不是單純的大小對比

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過於過度依賴字體大小差異來營造對比。

「這段文字重要嗎？那麼讓它更大一些吧。」

「這段文字是比較次要嗎？那麼讓它變小一點吧。」

單純使用字體大小對比，所營造的對比並不夠，嘗試結合色彩和字重來營造更好的對比效果。

「這段文字重要嗎？我們讓它色彩更加大膽一些吧。」

「這段文字是比較次要嗎？我們讓它的色彩更淺一些吧。」

如果可以的話，你甚至可以採用兩到三種顏色：

・主要內容採用深色（諸如標題，但是不要用純黑）

・次要內容採用灰色（比如文章發表日期）

・輔助性內容採用淺灰色（比如頁腳中的版權聲明）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

・大多數的文本採用正常的字重（400到500，具體取決於字體）

・對於需要強調的文字採用較重的字重（600到700，具體取決於字體）

應當盡量不要讓正文部分字重低於400，因為這一部分字體本身尺寸已經較小，低於400會使得可讀性不佳。如果你依然需要降低字重，那麼不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

02

-

不要在有色背景上使用灰色的文本

在白色背景下，將黑色的文本改成灰色，是不錯的淡化其視覺效果的做法，但是在彩色背景下這么做，則是另外一回事。

實際上，讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下，想要降低對比度是應該讓文本逐步接近背景色，而不是改為灰色。

想要降低和背景色之間的對比，通常有兩種方法：

1、降低白色文本的不透明度

降低不透明度，能夠讓背景的顏色透過來一些，以一種不沖突的方式降低前景文字和背景之間的對比度。

2、基於背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候，半透明的文本會影響可讀性，這個時候最好是基於背景主色調來挑選相應的文本色。

03

-

陰影設計

相比於採用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特徵，光線從上往下照下來所營造的陰影效果。

如果你對此有興趣，Material Design Guideline 非常清晰地給你講明白了這樣的陰影的製作細節。

04

-

盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候，盡量避免使用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，甚至會造成混亂。

所以你可以嘗試下面的辦法來規避：

1、使用 box shadow

box shadow 同樣可以營造出邊界感，而且更加微妙，並不會顯得突兀，不會分散用戶的注意力。

2、使用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊採用不同的背景色，並且嘗試刪除邊框，因為你根本不需要它。

3、增加額外的留白

創建元素之間的分離效果，並不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

05

-

不要讓小圖標無端地放大

當你在設計著陸頁的時候，可能會突出產品的功能，這個時候你需要一些大圖標來作為視覺錨點，這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標，然後放大到符合你需求的尺寸。

它們都是矢量圖標，照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍，它固然無損，但是在視覺上就顯得頗為不專業了：缺乏細節，總感覺過於矮胖。

可是，如果這些小圖標是你唯一能夠搞得到的素材的話，那麼不妨試著將它置於另外一個帶有顏色的圖形當中：

這樣的設計不僅能夠讓圖標達到預期的視覺體積，而且看起來要比單純放大，看起來細節會更多一些。當然，如果你手頭不是那麼緊的話，最好還是買幾個大尺寸的高素質圖標，比如 Heroicons 或 Iconic。

06

-

增加帶有顏色的單邊邊框提升個性

當然，你可能並不是一個對於平面設計有著足夠經驗的設計師，但是依然可以讓你設計的界面有足夠的視覺吸引力。

最簡單的方法，就是在界面的邊框中的一邊添加上單色甚至漸變的邊框，這能讓平淡無奇的界面一下子變得鮮活起來。

比如在警告彈出框的側面：

或者在導航欄的底部，以示觸發：

或者在整個頁面的頂部：

這並不需要什麼平面設計的經驗，但是會明顯強化設計感。

退一萬步講，你不知道選取什麼顏色，簡單，上Dribbble 的色彩搜索中隨便找幾個看著漂亮的顏色，其實也就夠用了。

07

-

並非每個按鈕都需要顏色

很多時候，按鈕本身所處的語境和按鈕上的文本內容會讓人感到迷惑。像BootStrap 這樣的框架就讓設計師按照語境和語義來進行選擇：

「這是一個積極的操作？讓這個按鈕是綠色的吧。」

「這是否是要刪除數據？那麼將按鈕設置為紅色的吧。」

的確，語義和按鈕本身的設計息息相關，但是還有更重要的維度被忽略了，那就是層次結構。

網頁上每個操作其實都位於整個交互金字塔的某個位置。絕大多數的頁面其實只有一個主要操作，搭配一些不太重要的次要操作，以及為數不多的幾個三級操作。

在設計這些交互的時候，通過層次結構來呈現這些交互的重要性是很重要的設計環節。

・主要操作應該很明顯。採用實色、高對比度的按鈕是很有必要的。

・次要操作應該明顯，但是不突出，採用幽靈按鈕或者和背景對比度較低的色彩是比較合理的。

・三級操作應該是可被發現，但是不明顯的，他們最好被設計為鏈接。

「破壞性的交互所涉及的按鈕難道不應該是紅色的么？」

沒必要！如果破壞性的交互所涉及到的按鈕不是主要操作的話，讓它按照次要操作甚至三級操作的按鈕來設計就好了。

如果這樣的操作是主要操作的話，可以讓它是大號的、紅色的帶有加粗文本的按鈕：

小結

-

以上總結的七個ui界面設計小細節處理技巧，都是大量的項目實戰工作中總結出來的，容易理解也容易執行。有人可能說，連一個像素都在磕，又不是搞科學研究火箭發射，有必要嗎？我只能說，這是一個工作的專業度問題和態度問題。也許一像素並不影響ui界面的美觀問題，但是卻是一位大師和普通工人的區別。

7、設計網頁風格 UI （用戶界面） 用什麼軟體

1樓就足夠了，只要做框架圖和注釋的話 VISIO很不錯 是微軟的專門做這事的工具

PS一般來說都是美工在用，策劃的機器一般來說都比較差，PS的內存佔用蠻大，使用上比VISIO來說相對麻煩一點，所以策劃或者程序做設計圖的時候沒必要用PS

8、界面設計用什麼軟體

要看你是從事網站界面設計還是軟體界面設計。網站界面設計，必須了解一些簡單的html、div、css樣式表等基本語言；軟體界面設計，就要了解其產品
所用的是什麼工具做的，軟體和硬體的兼容性問題（性能問題）。對於設計軟體，常用的有photoshop、網頁3劍客、UIDesigner等。

但是吧，這其實僅僅是皮毛，真正要設計出來東西，我覺得還是找專業人吧。例如北京的智加設計，我們去年和他們合作過。智加真的挺不錯，團隊大概在百人左右，他們會針對每個品牌的實際情況整合出一套量身定做的方案，你可以去他們網站看看，還有很多案例。

9、ui界面設計學哪些軟體？

1、PS 全稱 Photoshop
UI設計復用的制最多的軟體，90%以上的UI設計師都是要會PS的，其處理圖片功能非常強大，調色方面也不錯，還有圖層樣式，是UI設計必備的。
2、AI 全稱 Illustrator
一款矢量繪圖軟體，在做UI圖標上非常不錯。特別是繪制扁平化圖標這塊。很好用。也有矢量功能畫出來的圖形可以放大縮小。
3、AE 全稱 After Effects
主要是做來做影視後期視頻特效的，但是在UI這個的話就是用來做一些UI的交互動效。
4、ARP 全稱 Axure RP Pro
主是要用來做原型圖。
以上就是龐姿姿對此問題的回答，希望對你有所幫助。

10、網站界面設計都用什麼工具？我做後台，前台界面用vs不太好做，除了dw還有什麼方便設計前台頁面的工具

我也是做後台的，前台他們應該都是dw吧，我用netbeans和sublime text