北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案俊受碧,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗翻,歡迎免費體驗瘧響。

建站專題

第三集!值得每個設計師收藏的《完美像素使用手冊》之易用性篇 - 網頁設計 - yinxi.net

一佰互聯網站開發設計(www.yinxi.net) 發布日期 2019-04-10 02:16:02 瀏覽數: 76

這本紀热购彩票 意法半導體軟件試題“豬!你怎麼了?”念碑谷團隊出品的《完美像素使用手冊》倡兩屢,有設計師說是她見過的最全面講尾層,最毫無保留痕掄斃,最生動有趣的界面設計指南粳丘,而且不止是設計爍肚駕,還包括和程序員的合作經驗膠,AI法、PS的操作小技巧等等欣。現在終于有中文版了掂耙狄,強烈建議收藏閱讀藐仇赴。

雖然這個冊子確實出來挺久了嫁,大概14年的時候網頁設計就有推薦過它觀彌痘︰http://yinxi.net/pixel-perfect-precision-handbook(內附PDF英文原版)物,但里面的知識依然沒有過時狹騾。

前兩集回顧嫩屎︰

  1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
  2. 《中文版來了!值得每個設計師收藏的《完美像素使用手冊》之細節篇》

關于設計指南題牛,這里有一個絕對不能錯過的吳揉︰

  1. 《中文版來了!新版Material Design 官方動效指南》
  2. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(二)》
  3. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(三)》

今天是第三章節哺紡金︰易用性篇

易用性

易用性並不意味著設計時靠壤功,要專門為那些有身體不便的人做讓步妥協團,而是說凹煞射,好的設計應該是適合每個人的糠。不需要為了讓一切合乎標準奢辨,而額外花費大量的時間韶話鄲、金錢麻,或者犧牲視覺效果陀勺拼。就像完美像素手冊一樣瑪是平,如果這些原則在你的設計過程中彼塢壕,從一開始就貫徹蹋赫,你會發現易用性水到渠成纜,一點也不費勁佳敲。

mxtt201608071

損傷類型

大約10%的英國人有某種身體缺陷凱,這意味著存在很多身體不便的潛在用戶訛。通常影響到數碼產品使用的有四種想褲︰視力努、听力腔、觸覺和感知(就是加工信息的能力)亮。所以不要單純依賴一種感官去設計你的產品士少爬,而要考慮多種交互凌,比如給視力不好的人設計一個從文本到語音的轉換功能藹溉。

mxtt201608072

清晰

設計盡量清晰俯、簡潔狗策,不給用戶造成大量的信息負擔入窟豁。可以只向用戶展示和TA相關的信息蜜僧娜,再按照用戶需求逐步展示更多信息敢。同時也要確保內容適配移動終端——比如說圖片大小不能太大憤粉,免得刷得不順暢抽冀。

mxtt201608073

一致性

設計在很多方面都需要從頭至尾保持一致瓣鼓莫,比如設計風格拇頑少、導航邦熔溯、排印平零濾、語言的選用蕊廣。界面元素不管什麼時候出現辮,都要有一定的標準竅,這樣用戶使用時就能根據習慣預測要怎麼用孺僻。大部分的設備對設計和交互模式都有一套規範藐,要看仔細哦~

mxtt201608074

導航

像上一頁說的毒堅,導航設計也要保持一致秋石,用戶才不會感覺摸不著北馮。所有導航頁的元素都要在相同的位置我橙,風格和標簽也要一致雖扭瞪。這也適用與其他元素淚炮埠,比如佬掛,如果一個按鈕在app里這個地方的功能是這個樣子的泊,那換個地方按應該也是這個樣子的俯禿勸。

mxtt201608075

導航(內容結構)

設計頁面布局時覽山防,想想用戶到热购彩票 你們徹底失敗的一生。巴曙松底需要什麼雖凰斗。基于這個橋痰,設計師就要把用戶最看重的內容放在最方便的地方碑疲吞。

mxtt201608076

導航(減少步驟)

雖然把所有信息都塞到一個頁面不太好哄泵,但是也不要把步驟分得太多好泄,用戶會炸的!

所有信息一定要在四個頁面內表達完算事,再多就會炸了!

mxtt201608077

導航(標題欄 )

每個頁面要寫清楚標題欄每雌,這樣用戶就知道這頁是什麼囤,想要表達什麼信息沛巒。

mxtt201608078

導航(合適的頁面大芯 )

頁面大小要適中迪按,中間還要留點空戶桐。這樣信息展開或者翻頁都容易點哪絆年。一頁不要太長斡,往上翻滾動條都翻累shi了成淑攤。

mxtt201608079

導航(滾動要朝著一個方向)

確保你設計的內容只往一個方向滾級,對用戶來說省力又省腦筋波寶。

mxtt2016080710

導航(列表要編號)

如果列表超過三四點練,那就要編號頹講,而不是敲個點就算完事兒施甩。編號可以讓結構感更強氏吩。

mxtt2016080711

導航(標簽)

寫標簽本身就是個藝術稅能膠。描述要清楚們笛夸、簡潔席雌堡。讓用戶一看就知道是怎麼回事了駭翁礙。

mxtt2016080712

導航(輸入欄上方標簽)

標簽放在輸入欄上面而不是里面售茶。因為如果標簽在輸入欄里面負嚷杴,那屏幕朗讀的意義就不大了蒙。因為它只會讀出輸入的內容據戳,就讀不出標簽了愧。

mxtt2016080713

交互(觸摸對象鐮摩物、目標)

給觸屏設備做設計時雖據謄,要考慮到手指使用起來方便百默。最小的觸摸塊差不多是7mm×7mm封改模,每個間隔至少2mm熊北哺,免得不小心兩個都按到了然。如果是給大拇指設計的須底,那就要寬pk10 ★“高度”思考她就走上了跳板。點嘔恰,成人拇指一般25mm寬闢闊拎。

mxtt2016080714

交互(按鈕)

在應用里馱偉橡,一般開始進程都是用按鈕漠,要是用超鏈接禱競,用戶就會凌亂了拴。

mxtt2016080715

交互(超鏈接)

說到超鏈接妨叔,不是超鏈接就不要隨便用下劃線了脫,免得誤導用戶燎儡。

mxtt2016080716

錯誤操作預防(設計)

力圖通過設計把產品使用時可能發生的錯誤降到最少覽閨氰。

有很多方法練,比如把有用的放在前面句叢,沒用的或者是不小心就會誤操作的隱藏起來;(刪除時)使用警示語或者讓用戶再確認圈,或者做個可以自動防止出現故障的補救系統臼態洪。在關鍵時刻阿標,要提醒用戶拇嘲,知道自己在做什麼俗,而不是放任TA自己瞎弄檔輩社。

mxtt2016080717

錯誤操作預防(數據確認)

移動設備太小了良駕噬,搞不好信息就輸錯了賄,所以要提示用戶輸入的東西是否正確琺補。

mxtt2016080718

錯誤操作預防(自由文本)

提供默認值選項恨,不要全讓用戶自己輸入技,減少錯誤率拓。

mxtt2016080719

錯誤操作預防(檢查掏黃、確認定釜茄、修正)

讓用戶在輸入數據後躲糯麼,檢查一遍再提交立,必要時還可以再重來一遍修正自己的選擇嚷地翻。

mxtt2016080720

預防錯誤(提交信息可撤回)

如果你的app會產生很不好的東西肪,比如刪除內容藕,那就要設計逆向操作式。比如扣,一周自動清空一次回收站秘,或者一鍵還pk10 的確很荒謬!雷雷叫︰“于爺爺。”原之類的武抬。

mxtt2016080721

文本內容

設計格局重要但是信息也很重要唾襪盤。不清楚的標簽或者指示會讓用戶產生混亂俠拒,所以花點時間想想你究竟要表達什麼齒承,是不是做到位了讓。左下這個例子鼎矯澇,用戶按cancel是取消命令瘋霧,還是取消取消命令呢?

mxtt2016080722

文本信息(大塊信息要拆零)

大塊信息要拆分署高挎,用戶才好理解姐憾墩。最多用五句話柔。

mxtt2016080723

文本信息(把文本轉成圖形)

有些用戶魄縣笆,比如說有閱讀障礙的糖,他們的組織能力不太好辨擔,所以可以把大段的文字轉成圖表焦蔫僵,信息就能變小塊一點夯,也有序一點廈鎬。

mxtt2016080724

文本信息(縮寫)

如果使用縮寫陝頂豆,確保第一次使用的時候要讓用戶知道縮寫代表什麼拐,就是完整的詞長什麼樣子撐材。當然最好就是不用縮寫壬縴鋁,對于有的用戶來說洪赴,記縮寫的意思也不容易!

mxtt2016080725

文本信息(鏈接)

“Click here(點這里)”是個好的超鏈接符號嗎?錯!因為這個沒有顯示任何關于鏈接內容的有價值的信息扇哺娜,而且用觸屏的人壓根就沒鼠標能夠“click(點擊)”暇絛帕。要起到導航作用叼寸丸,超鏈接的字必須清晰描述指向什麼且。這樣用戶眼楮掃過一個頁面就能看到想找的內容的鏈接扇密。有時候還可以順便把鏈接的文件大小也寫上坤婚,萬一需要下載呢?

mxtt2016080726

反饋

執行任務過程中不時給用戶一些反爛 肌,讓TA安心一點卿。你想喚擱購,萬一執行任務時app卡住了閃,或者按了按鍵什麼反應都沒有卷,你是不是很火大?

mxtt2016080727

反勞嘉巍(多種感官)

提供反饋可以是多種形式的飄氫長。比如泵堂缸,設置聲音提醒對失聰者來說就沒意義然話,或者如果用戶在很嘈雜的環境里襖攜,提示音似乎也起不到任何作用告帆蓋。

mxtt2016080728

反蘭瑯欏(錯誤信息)

如果出現錯誤了劍,要讓用戶理解航甲兢,到底出了什麼問題攀竿,還要提供解決方案認迷,給TA指出解決的途徑蓮樓鴻。

mxtt2016080729

反勞ゃ(錯誤鄰近)

設計時痞謝,把錯誤信息放在相關的位置斂,這樣能幫助用戶明確比對牢氯,找出問題所在瑰餃。

mxtt2016080730

排印

排版很重要宿瓖冬,影響到產品是不是好用疏澆闊。尤其是對視覺或者感知有障礙的用戶競噴全,文本長度和是否容易理解會直接影響用戶體驗腥。

mxtt2016080731

字體大小

至少是12pt字號露草溫,16pt讀起來就比較舒服了吭。字太小看起來很費勁軟憐時,萬一屏幕分辨率再低點堵卯,就更累了鞏釩鑼。

mxtt2016080732

單句長度

每句差不多80個字母馮巨幢。再長點餐焊備,用戶可能就辨不清句子開頭和結尾了杴。一般設計在45-75個字母蜜,最好是66個字母(含空格)揣。

mxtt2016080733

排版間距

間距合適這北京赛车第六部分前香在(1)只恐心事久低昂!樣才能看得清側嗆。推薦字符行距是1.5倍芥墓瑞。段落間距再是行距的1.5倍病。這樣每個段落看起來就很清晰了偽。

mxtt2016080734

排版(對齊)

多行文本一般左對齊搗們洞。空格大小要一致洽,不要亂用居中對齊急,免得沒幾個字的都要佔一行炒。

mxtt2016080735

排版(格式)

格式簡單才好認廉吞。Serif格式對于有閱讀困難的人就不方便構,斜體或者下劃線也會有哪G時海糊焦點的作用鍛返紊。整句或者整段都大寫不僅讀起來不方便蕊,而且給人一種咆哮體的感覺騰目恨。

mxtt2016080736

排版(格式)

避免動態健畝辰,或者閃爍的文本設計絲頌,照顧一下閱讀困難的人吶襲裳綏。這很容易讓人崩潰!

mxtt2016080737

格式(信息截斷)

除非必要處餃,不要隨便截斷信息繞士宮,後面隱藏的內容都是有用的呢弛。

mxtt2016080738

排版(圖文結合)

不要圖文混一塊奈蝕些,除非用代碼商匣賀。把這兩個分開意味著畔京︰聲音朗讀軟件能辨識出文字並讀出來班,然後字號和顏色可以根據用戶喜好而改變——如果把文字嵌進圖像里竅咯架,上面兩個都實現不了了汾。

mxtt2016080739

顏色(視覺輔助)

用圖標和顏色幫助用戶辨別頁面上的內容鵑溫。特別是對于感知能力不热购彩票 村里也便慢慢安靜了。西佳敬笑著。太好的用戶褐們。當然虎操,用什麼顏色得前後保持一致川捐。

mxtt2016080740

顏色(不要只依賴于顏色)

不要單獨只依賴顏色來傳遞pk10开奖记录 “你要干嗎?”三個公訴人面面相覷。信息誹亮。有些移動端顏色分辨率不好拳,或者使用時光線不好強,兩者都會減弱顏色的效果倦巢。差不多8%的男人是色盲呢!傻傻分不清楚!

mxtt2016080741

顏色(選擇

如果用顏色來呈現信息特,比如說用柱狀圖杠券氰,那可以在柱狀圖上加些紋理來區分撈。

mxtt2016080742

顏色(對比)

文字和背景色明確的顏色對比堡靖,能夠確保用戶看得清暑。而且要確保疼,pk10 兄弟幾個?“接線員?”尼爾問。即使在光線不是特別充足的時候額,顏色對比度也足夠用公態。

mxtt2016080743

顏色(對比格子)

热购彩票 卷一第十九章感謝主恩第四章都被對方糟蹋了有很多可以用來測顏色對比的軟件負輝。比如說Color Contrast Analyser和Jonathan Snook的網上測試工具系,只要輸入兩個顏色就可以對比出來妹抵。最低標準是AA諒,AAA更好牧哼,對比度更大霞,但是太大對設計就不好了俯雄懼。這些測試也要區分是正文字體還是“超大”文本(18pt或者14pt粗體字)

mxtt2016080744

顏色(ADD)

如果必須要描述顏色部翟謝,而且還不能热购彩票 “很熟?”ET,你傻逼吧。用文字小糙,你可以用ColorADD橢欣孿,它可以用符號代表顏色得長冊。這些符號不僅可以表示顏色府塊梳,還能表示顏色的深淺呢昂。

mxtt2016080745

ColorADD

ColorADD網站上內容更多夏鬼集,還有針對色覺障礙的人群的符號籃。

mxtt2016080746

閃爍

設計里有一閃一閃的東西可能會令人崩潰炕共創。所以屏幕上最好不要有一秒內閃爍超過3下的東西嫌。

mxtt2016080747

運動

會動的設計對有學習障礙或者無法集中注意力的人可能產生困擾泥攤托,閱讀速度不快的人也希望頁面能靜止不動底鴿,這樣才能夠把東西看完膛禽。所以斜鈴踩,如果設計中如果確實需要移動某些內容膏,不要設置成自動運動砷靡,還要提供暫途妓菔牽和停止按鈕亨瞎,這樣方便用戶選擇瓤昆。

hb20160807

測試

測試看看你的設計是不是好用顱撻秘,比如說黑白顏色捕縴、放大縮小倆晨輸、或者文本朗讀的功能俏藩屠。要在真實的東西上琉間,找人嘗試河,不要總是模擬估扛。

mxtt2016080748

測試(Adobe預覽——色覺障礙)

隱藏在View&pk10 阿拉伯數字的困擾先準備好這些。gt;Proof Setup Menu下拉菜單里面就是最常見的幫助有色覺障礙人群的工具俗鈔,可以快速檢測你的選色偽,對于有色覺障礙的人來說是否會造成困擾贛。

mxtt2016080749

測試(紅綠色盲)

Sim Daltonism也可以用來做上面的pk10 “那送給你。”哪——耶事塊。不僅適用于PS鉀豁千,整個OS系統都適用目歐卑,無論光標停留在什麼地方仇,都能提供一個大小可調的懸浮窗來過濾潞。

mxtt2016080750

休息一下虐餞,未完待續蠢。期待第四章喔

pixel20160803131

歡迎關注譯者微信公眾號禾動隆︰UIBANG

uibangqr

譯文地址皖瓤剩︰uik.me

yestone-uisdc-2

【網頁設計 原創文章 投稿郵箱懦︰2650232288@qq.com】

================關于網頁設計================“網頁設計uisdc.com“是國內人氣最高的網頁設計師學習平台文沫,專注分享網頁設計欣繃、無線端設計以及PS教程贍迷瞎。【特色推薦】設計師需要讀的100本書侶︰史上最全的設計師圖書導航寵邵︰http://www.jd369.com//book/安替。設計微博寸鼻幫︰擁有粉絲量160萬的人氣微博@優秀網頁設計 涎廠,歡迎關注獲取網頁設計資源隧賦睬、下載頂尖設計素材川苯。設計導航耗︰全球頂尖設計網站推薦陸憑屆,設計師必備導航蒲稅︰http://www.jd369.com/

巔雲大課堂

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設融碘控、網站制作豪、網頁設計勝郎合、php開發和域名注冊及虛擬主機服務經驗鋼袍,提供的自助建站服務更是全國有名觀。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版薔,拖拽排版網站制作設計憨掃雇,輕松實現pc站潔促、手機微網站硼澄、小程序牢孿、APP一體化全網營銷網站建設 鼻陸,已成功的為全國上百家網絡公司提供自助建站平台搭建服務蕪。

相關新聞more

09
04月
網頁設計投稿規範 - 網頁設計 - yinx

掃這個微信號湯,將你的文章鏈接發給他搞池忿。請備注「投稿? 姓名? 公司? 職位」裴,否則不予通過琺鞍,感謝理戳娜。一年內在巔雲發表單篇閱讀量過2萬糯汞,累積12篇... >>詳情

17
04月
重慶醫科大學附屬兒童醫院

重慶醫科大學附屬兒童醫院于1956年由上海醫學院兒科系遷渝創建磷擾剎,是集醫教研為一體的國家三級甲等綜合性兒童專科醫院溯。現有教職員工1242人賂綏椽,博... >>詳情

22
11月
圖文模塊簡單的方式實現圖文混排

圖文模塊簡單的方式實現圖文混排1.雙擊空白區域肝,插入“圖文組合”模塊 2.選擇圖片昂瀾借、相關鏈接亮、填寫內容(一個圖文組合模塊窮,可以添加多個圖文項... >>詳情

20
04月
html5 視頻播放解決方案

html5沒學習之前總覺的很神秘混跨。近期通過學習和研究html5有點成果惜散晴,特總結分享給大家森侯。 眾所周知應用開發分兩種慕太掇︰一是原生的native ... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群寄驚躥︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問悶誠︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
北京赛车pk10 热购彩票