發(fā)布時間:2023-12-26 19:44:05 瀏覽量:168次
在這篇文章中,我將分享一些我認為在日常工作中能幫到大家的方法,但這些方法也并非一成不變。我其實覺得,設計就是要跳出框框去思考,但先清楚規(guī)則才有可能打破規(guī)則。
在3dp或者4dp下的像素值
如果你不熟悉dp的概念,我也在這里先說明一下:像素密度是每一英寸的像素值也叫ppi,單位dp是單詞“density-independent pixel”的縮寫,有時也縮寫為“dip”。
在設計界面時,建議不要針對像素而設計,而是針對設備的像素密度進行設計,這樣能確保設計元素能在各個不同設備上很好的適配。
例如:如果我們設計一個按鈕元素,大小是200x50dp,那么它在160ppi的屏幕上顯示為200x50dp,在320ppi的屏幕上顯示為400x100px,即原始資源的2倍。
在某些屏幕每英寸的像素要比其他屏幕多,但設計資源卻不會在像素密度高的屏幕上顯得更小,這是因為在這些屏幕上會以原始尺寸的2倍,3倍,4倍進行渲染。這樣的機制可以確保所有設計資源可以在不同密度和設備之間保持同樣大小。
例如:iPhone XS Max的屏幕尺寸是414×896,但這不是像素尺寸而是點的數(shù)量,以像素為單位時是1242x2688px。考慮到這一點,在設計iPhone XS Max時,我會將在414×896點下設計,然后交付@3x的設計資源。
為什么設計中要用8dp這個增量規(guī)則?這里有一個簡單的解釋:我們使用8而不是5這個神奇數(shù)字的原因是,如果設備有1.5倍的分辨率,就很難被整除而出現(xiàn)鋸齒。
此外,絕大多數(shù)的屏幕尺寸都可以被8整除,這就是使得我們的設計在這些屏幕上適配變得很簡單。
通過在8點網(wǎng)格上以8為增量進行設計,也讓設計變得更加統(tǒng)一。設計師不需要更多的猜測,就能快速做出決策,做到完美適配。
想要更全面地了解這個規(guī)則,可以去看看Bryn Jackson的8點網(wǎng)格文章(文章鏈接在
https://spec.fm/specifics/8-pt-grid)。
在做設計的時候,應該時不時的停下來看看,確定下設計出的容器是否會使得UI變得混亂。通常,用于分隔內容的框和線可以用留白代替。
我們以前做設計的時候,喜歡將元素套在盒子里。所以,只需要把這些盒子去掉就能使頁面看起來不那么密集,并給元素更多的呼吸空間,整個界面就能提升一個檔次。
合適的對比度不僅可以讓用戶看到頁面上的相關信息,還可以提高產品的易用性。
設計一款產品就類似于建造一個公共建筑,比如圖書館或學校,它需要包容所有人:盲人,色盲或視力受損的用戶。
網(wǎng)頁可用性標準 (WCAG) (
https://webaim.org/articles/contrast/ )規(guī)定對比度至少要達到4.5:1。
為了確保你做的設計符合標準,建議下載一個叫“stark ( https://getstark.co/)”的插件,來檢查設計是否OK。
某些元素被認為是標準的原因有很多。
例如:如果將按鈕設計為圓形,那么當文本需要為“Start Free Trial”時,按鈕就會占用不必要的垂直空間。
除此之外,用戶已經開始期待類似的產品體驗。如果你設計出來的網(wǎng)站,App,軟件功能和用戶所習慣的不太一樣,那么它就是不直觀的,用戶就可能對這種體驗感到失望。
因此,最好是在現(xiàn)有的設計規(guī)范的范圍內進行創(chuàng)新,而不是去重新發(fā)明輪子。
每種顏色都有一個視覺權重,這有助于在內容中建立層次結構。通過使用顏色的深淺,為元素賦予不同的重要性。
這里的經驗就是,如果一個元素比另一個元素更重要,那么它就應該具有更高的視覺權重。這能讓用戶很容易區(qū)分重要和不重要的信息,從而快速瀏覽頁面。
更大,更醒目的信息會首先吸引用戶的眼球,然后才會看向它下面的次要信息。
一個普遍接受的設計共識就是在同一張界面中使用的字體數(shù)量應該要有限制。一般來說,兩種不同的字體就足夠了。這不是說不能用更多的字體了,而是最好要有合理的理由,否則最好不使用。
解決這個問題的方法是使用字體族。
使用字體族,我們可以在設計中使用具有不同變體的相同字體,來自同一家族的字體被設計成可以一起使用,是靈活且一致的。
在選擇字體時,優(yōu)先選擇具有各種權重的字體,如細體,標準體,中粗體,加粗體,超粗體,寬體,擴展體和斜體。這將給你更多的發(fā)揮空間,而不需要添加額外的字體。
直接是產品設計的一個很好策略,因為,為什么要讓用戶思考?
結賬頁面,電子郵件收件箱,搜索歷史記錄,后退按鈕等都是很好的例子。
在付款頁面上(如果設計得好的話),我不需要記住我買的是什么東西,也能夠清楚地識別出我要買的東西,而不需要喚起我的記憶。
搜索歷史
在我的Gmail收件箱里,我只需要掃一眼,就能確定哪些郵件我讀過,哪些沒有讀過,而無需多想。或者,如果我登錄到Amazon,我可以快速地從我之前瀏覽過的地方繼續(xù)看,因為它能告訴我最近查看的條目。
“通過使對象,操作和選項可見來最小化用戶的閱讀壓力。用戶不必記住從對話的一個部分到另一個部分的信息。在適當?shù)臅r候,系統(tǒng)使用說明應該是可見的或者易于搜索的?!薄釥柹Z曼
對于用戶來說,速度和效率是唯一重要的事情。用戶來用某個應用,目的就是為了解決他的問題。
“我想要更快一點?!?/p>
— Ricky Bobby
如果做了很多豐富的功能,那很好,但不要讓你的創(chuàng)造力妨礙我作為用戶的目標。
一個關于動畫和微交互的經驗法則是,如果體驗增加了不必要的時間,那么它并不能真正改善體驗。
有目的使用動畫可以改善體驗,但添加不必要的干擾和移動元素卻不會。
我經常在Dribbble上看到著陸頁設計,當用戶在頁面上滾動時,頁面就會動起來。它往往過于活躍,所有的東西都在動,反而內容本身被忽略了。作為一個用戶,當界面中發(fā)生了這么多事情時,很難讓其應該注意什么,這簡直是在浪費用戶寶貴的時間。
Sorry to call you out Dribbble user
大量研究發(fā)現(xiàn),界面動畫的最佳速度在200到500毫秒之間。這些數(shù)字是基于人類大腦的特殊品質。任何小于100毫秒的動畫都是即時的,根本不會被識別。而超過1秒的動畫會給人一種延遲的感覺,會讓用戶覺得無聊?!?/p>
——The ultimate guide to proper use of animation in UX
所以,如果你在使用動畫,一定要有目的。如果這些動畫是有目的的,那么不要讓我等待超過500毫秒。在2019年,惹惱你的用戶只需要一毫秒。
每次我們想添加額外的信息到頁面:按鈕,文本,圖像,動畫,插圖等,它都會與相關的信息競爭。如果頁面上的內容太多,元素的重要性就會降低。
一個完美的案例就是著名的谷歌主頁,而不是像Yahoo一樣淹沒訪問者可能并不需要的信息里,設計仍然集中在核心任務上:搜索。
對不住了Yahoo,我不得不這么做了
我最喜歡的設計格言之一是:“完美,不是因為沒有什么可以增加,而是沒有什么可以減少?!?/p>
——Antoine de Saint-Exupery
作者:Danny Sapio
熱門資訊
1. iPhone6的UI設計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設計網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
3. 移動端UI設計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設計的基本知識
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
5. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程,以及培訓后的職業(yè)發(fā)展機會。
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
大家今天走運了,我就把自己總結出來的學習UI設計的一些經驗與大家一起分享吧。想做一個好的UI設計師除了應該具有一定的審美能力,還要了解整個產品的...
同學您好!