A. web端UI設計和移動客戶端UI設計有什麼不同
界面的大小不一樣
UI即User Interface(用戶界面)的簡稱。泛指用戶的操作界面,包含移動APP,網頁,智能穿戴設備等。UI設計主要指界面的樣式,美觀程度。而使用上,對軟體的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。好的UI不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。
B. UI設計常用字體有哪
1.平平穩穩:微軟雅黑/方正中黑
微軟雅黑系列:在網頁設計中這款字體使用的非常平凡,這款只無論是放大還是縮小,形體都非常的規整舒服。在設計過程中建議多使用雅黑,大標題用加粗字體,正文用常規字體。
方正正中黑系列:中黑系列的字體筆畫比較銳利而渾厚,一般運用在標題文字中。但這種字體不適用於正文中,因為邊緣相對比較的復雜,文字一多會影響用戶的閱讀。
C. web font怎麼使用中文網頁字體
1、在Web編碼中,CSS默認應用的Web字體是有限的,雖然在新版本的CSS3,我們可以通過新增的@font-face屬性來引入特殊的瀏覽器載入字體。
瀏覽器中展示網頁文字內容時,文字字體都會按照設計師在css中定義的字體族的順序來進行顯示。什麼是字體族?字體族就是你在css代碼中看到「font-family」的代碼內的一類字體名稱,例如下面這行代碼:
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;
按照W3C標准,瀏覽器在解析一行代碼時首先會在系統中查找Comic Sans MS字體,如果系統內存在這個字體那麼瀏覽器就會使用Comic Sans MS字體,如果沒有的話就接著查找幼圓字體,以此類推直到瀏覽器可以表達系統存在的字體為止。
注意了,「sans-serif」不是某個字體的名稱,而是一種在前面敘述的字體都無效時而最終選用的字體,稱為瀏覽器通用字體,它取決於你所用的瀏覽器默認的通用字體是什麼,可能是「Arial」,也有可能是「Helvetica」。
2、網頁常用字體通常分為5類:serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體),這些通用的名稱允許用戶代理從相應集合中選擇一款字體。
serif 字體在字元筆畫末端有叫做襯線的小細節,這些細節在大寫字母中特別明顯。
sans-serif 字體在字元筆畫末端沒有任何細節,與serif字體相比,他們的外形更簡單。
monospace 字體,每個字母的寬度相等,通常用於計算機相關書籍中排版代碼塊。
fantasy 和 cuisive 字體在瀏覽器中不常用,在各個瀏覽器中有明顯的差異。
3、網頁常用字體
Sans-serif:
Helvetica: 被評為設計師最愛的字體,Realist風格,簡潔現代的線條,非常受到追捧。在Mac下面被認為是最佳的網頁字體,在Windows下由於Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,細節上比如R和G有小小差別。如果字型大小太小,文字太多,看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標准字體,屬於humanist風格,稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字體,humanist風格,在小字型大小下仍可以清楚顯示,但是字體細節缺失嚴重,最好別做標題。
Tahoma: 也是humanist風格,字體和Verdana有點像,但是略窄一些,counter略小,曾經是Windows的標准字體,Mac 10.5之後默認也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字體,個人覺得個性太過突出,用得不好會不搭。
Serif:
Georgia: 基本上適合正文屏顯的襯線字體,非Georgia莫屬了。筆畫粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還算OK。
Times: Times是為了報紙而設計的,特點是可以在有限的空間塞進去更多的文字,筆畫較弱,小字型大小正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文,被罵得很慘之後換成了Georgia。
中文:
宋體:Win最常見的字體,小字體點陣,大字體TrueType,但是大字體並不好看,所以最好別做標題。
微軟雅黑:Vista之後新引入的字體,打開Cleartype之後顯示效果不錯,不開Cleartype發虛。
華文細黑:Mac下的默認中文。
4、寫個小demo,在各種瀏覽上測試了一下,各種瀏覽器對這個字體的解析還是有差異的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重置*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--網頁字體通常分為5類--
<div style="font-family: sans-serif;">你好 hello world sans-serif(無襯線) </div>
<div style="font-family: serif;">你好 hello world serif(襯線) </div>
<div style="font-family: monospace;">你好 hello world monospace(等寬) </div>
<div style="font-family: fantasy;">你好 hello world fantasy(夢幻) </div>
<div style="font-family: cuisive;">你好 hello world cuisive(草體) </div>
<br/>
--無襯線類--
<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world Trebuchet MS </div>
<br/>
--襯線類--
<div style="font-family: Georgia, serif;">你好 hello world Georgia </div>
<div style="font-family: Times, serif;">你好 hello world Times </div>
<br/>
--中文字體--
<div style="font-family: 宋體">你好 hello world 宋體 </div>
<div style="font-family: 微軟雅黑">你好 hello world 微軟雅黑 </div>
<div style="font-family: 華文細黑">你好 hello world 華文細黑 </div>
<div style="font-family: 黑體">你好 hello world 黑體 </div>
</body>
</html>
D. 有哪些英文字體適合用作游戲UI
發絲襯線體是現代體中常見的字型,具有明顯現代感,不適合磅值小的字體。比較常見字體有Didot,Bodoni。板狀襯線體比較有力,是19世紀到20世紀初用在廣告牌上的文字,多用於標題,具有懷舊氣氛。無襯線體相對襯線體更加親和,現代。從類別上大致可以分成四類:Grotesque, Neo-grotesque,Humanist和Geometric。Grotesque是最早出現的無襯線體,所以保留了一些襯線體的特徵,比如小寫字母g的寫法不一樣,數字1下方有粗襯線。Neo-grotesque包括很多常用字體,Helvetica,Arial,Univers,不帶情緒,冷靜簡潔。
Humanist有一點書法感,給人溫暖的典雅氣氛,有一點女性氣質,識別度非常好,網站正文字體常用。Geometric字體趨近幾何形狀,例如字母O非常像正圓,字母a是半圓加一個尾巴,易讀性不好所以不適合用在正文,但是這類字體有非常強的設計感。在某些需要突出設計感的場合用磅值大的字體效果很好。
個人感覺從趨勢上而言humanist和Geometric使用率越來越高,尤其是web端Humanist慢慢在侵蝕Neo-grotesque的領地。
E. UI設計中字體設計有什麼技巧
對於一名UI設計師來說,字體是一門基本語言,更是設計師需要掌握的基本技能之一。目前常用的字體有很多種,比如黑體、宋體、楷體等。在平時的項目設計中,為了讓頁面中的字體更加貼合業務場景,設計師需要對字體的字距字高進行調整。接下來就給大家講解一下字體的相關屬性。
1、字體基礎結構詳解
一般來說,為了保持字體的完整展示,字體設計師都會給字體預留一定的安全距離,設定合適的升部線及降部線距離,讓字體展示的更為平衡。
在設計輸出的時候,如果沒有調整line值,是可以直接藉助sketch的標注插件sketch measure,來實時導出相應的參數,這樣的參數最接近開發效果。如果沒有Mac的同學,可以利用PS選中文字,那麼選中的深色底就是字體本身的間距。
2、字體的行高行距參數詳解
在一些文字較多的頁面,為了讓閱讀更為順暢,我們需要對文字的字高字距進行調整。通過sketch及動效編程軟體Origami中的可配置參數時只需要配置好Charater(字間距)、line(行高)、paragraph(行距)三個值即可。
3、字型大小大小如何設定
我們在做設計時,字型大小的單位需遵循原子理論,也就是使用一個基數作為倍增,如2、4、6、8、10 或者3、6、9、12。但其實我們在做移動端設計時,單位需要遵循偶數原則,因為開發中的單位是以一倍圖的基數來進行計算。那麼其實在制定字體規范中,使用2為單位會導致字型大小過多,不易管理,且2號字體的差異化不大。
所以在字型大小方面我們使用4作為單位是比較合適的:一是適配後在@2x跟@3x不會出現半像素,二是使用4為單位,能滿足字體大小的均衡。
4、合理配置字體拉開層級關系
在移動端的界面設計中,除了使用間距網格來拉開不同內容的層級外,對字體樣式進行適當的調整也是個很不錯的選擇。通過調整字重、字色,能讓頁面的視覺邏輯變為更加的清晰明了、主次分明,降低因視覺給用戶帶來的干擾,提升頁面的可操作性。如何來設定這兩塊呢?1)盡量減少頁面中的不同色相的顏色數量;2)使用不同的字重來區分內容。
當然,隨著用戶體驗度的變化以及技術的革新,字體運用也會出現新的趨勢,比如更大更粗的標題、更明顯的字重層級、用字體明度做內容上的信息區分等。
綜上所述,想要成為一個合格的UI設計師絕不是只會使用PS、AI軟體就可以,你還要注意各種細節。
F. ui界面設計 用什麼字體合適
要看面向什麼用戶了,一般我覺得如果是IE的話,用微軟雅黑好看.
G. 現在不少針對移動端的WEB前端UI框架,有沒有針對PC端的web前端UI框架,bootstarp除外,請大神們介紹幾款
這個很多
比如EasyUI、jQuery UI、LigerUI、Ext.js等
H. 怎樣合理運用ui設計字體
字體分為襯線和無襯線。為了使界面整潔,精簡,優秀的設計師永遠不會使用三種以上的字體,並且將裝飾字體的數量降至最低。大多數UI設計師都會將襯線字體與sans-serif字體配對,例如將主體文本置於serif字體中,將標題置於sans-serif字體中,反之亦然。
一致性
保持字體一致是避免混淆和混亂界面的關鍵。在傳達信息時,必須堅持相同的字體樣式,以便用戶立即理解他們正在閱讀的內容,並開始注意到一種模式。雖然可以在一定程度上處理層次結構,但最好的做法是建立一致的字體層次結構(一種用於標題的一致字體,另一用於子標題的一致字體)並堅持使用。
主要字體
用於所有較大的文本,例如標題,標題是頁面上最可見的字體。因此,至關重要的是要反映出品牌的身份-這意味著在選擇主要字體時可以更具創造力和更大膽。
次要字體
輔助字體將構成副本的正文。由於頁面上的任何文章或說明都將使用輔助字體,因此它應該干凈且易於閱讀,且不會產生壓力。
確保字體可縮放
當以較大的尺寸通過時,某些字體很容易看到,而另一方面,字體非常細的字體或裝飾過度的字體在較小的設置下可能會模糊。將字體添加到UI設計中時,確保字體可伸縮是至關重要的一步。
可縮放字體,也稱為離群字體或矢量字體,是可以放大或縮小而不會變形的字體。每個字元的輪廓都作為數學公式存儲。除了提供無數種每種字體的大小外,可縮放字體還具有另一個優勢,即它們可以充分利用輸出設備的解析度。顯示器的解析度越高,可縮放字體的外觀就越好。如果您的字體系統(產品上使用的字體家族)包括旨在多種用途的字體(從小標簽到較大的標題和大容量內容),請選擇與多種尺寸兼容並提高每種尺寸的可讀性和可用性的字體。
在界面中測試字體的可伸縮性時,請確保使用真實文本而不是Lorem Ipsum佔位符。這樣更實際地了解它們的擴展程度。
6.注意字體載入時間
許多設計師經常忽略的一件事是選擇對Web瀏覽器友好的字體。很少有人有耐心等待緩慢的載入時間-實際上,緩慢的載入時間甚至可能會損害站點的UX交互設計。常用的字體庫就提供了基於Web的字體文件,可以在瀏覽器中完美呈現它們而不會出現任何問題。 下載網路字體時,切勿下載過多的字元集,語言或樣式。這樣可以避免多餘的體重。
I. 網頁設計中,最小的字型大小應該是多少
網頁設計中的字體一般設置成12px,如果網頁的東西相對比較少,也可以設置成14px,關於導航和其他的一般是用ps處理出好的效果,如果是文本一般為14以上並且帶加粗。
字體沒有特別規定但是有常規的用法:
常規文字 12px;標題,頁頭 14px、16px;大標題,橫幅等 18px。
(9)web端ui的字體擴展閱讀:
網頁設計,是根據企業希望向瀏覽者傳遞的信息(包括產品、服務、理念、文化),進行網站功能策劃,然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種,精美的網頁設計,對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類:功能型網頁設計(服務網站&B/S軟體用戶端)、形象型網頁設計(品牌形象站)、信息型網頁設計(門戶站)。設計網頁的目的不同,應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標,是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化,在功能限定的情況下,盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。
網頁設計主要以Adobe產品為主,常見的工具包括FW、PS、FL、DW、CDR、AI等,其中DW是代碼工具,其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。