1115台北行Part6：HappyDesigner Meetup 4 (2/3)

第五個議程是由台灣數位有聲書推展學會成員示範視障朋友使用螢幕朗讀器。

視障人士不祇包括先天視覺障礙的人，還包括後天受傷導致視力減低、老年人的老花眼，籍由Jaws螢幕朗讀器可以幫助視障朋友獲得更多資訊。

無障礙網頁設計須注意以上幾點：

  1. 朗讀時採線性如錄音帶方式，如果沒有設定錨點（定位點），朗讀內容就必須從頭開始
  2. 遇到圖片時，會讀取有無設定標籤屬性Alt替代文字，以幫助視障朋友從文字敘述瞭解圖片內容
  3. 表格排版設計會使螢幕朗讀時無法讓視障朋友瞭解上下文間關連性
  4. 標題Heading 1-6標籤，螢幕朗讀會依優先層級排列，Heading數字愈小，代表越高層級（h1, h2, h3, h4, h5, h6）
  5. 善用清單、表格加用表格標題及表格摘要
  6. 影片檔案要用簡短文字敘述、Flash檔案亦是
  7. 網站有外部連結要加上宣告
  8. 視障者操作時完全使用鍵盤
  9. 多一些隱藏性貼心設計，幫助視障朋友更方便瀏覽網路獲取資訊

第六個議程接續上一個議程，由Jedi大師講解「你所不知道的親和力十件事」，整個就是秘技大放送，其它還穿插許多「梗」讓聽眾大笑，從排名第十開始說，講到最後一個即排名第一件事時，竟然是——Jedi打書，《網頁親和力：網頁多媒體實務》預計將於明年三月出版，與會聽眾無不笑翻。

這本為系列書首冊，預計系列書將出三冊，是因為星隊大戰有三部曲，所以網頁親和力也要來個三部曲嗎？Jedi大師演講功力及魅力果然十足，全無冷場，還運用了布丁、小丁、KERORO，征服藍星作範例。欲知道書籍最新出版訊息，歡迎參加贊助方案，最高方案可以獲得一刀未剪原汁原味的PDF版本。

第七個議程是由布丁大人、和多首席設計師講網站設計步驟Wireframe（示意圖）、Mockup（模型）及Prototype（雛型；原型），首先開場的相片是布丁的複製人——小丁歡樂的笑容，接著是用一張網路流傳「專案如何實際運作」的圖片帶入議題。

客戶與設計師常常因為溝通表達不完整，導致專案結果不符客戶需要，花時間做到死又被客戶嫌。好的文件是可以在專案期間便於溝通、決策及刺激創新的。良性溝通可以讓客戶、程式設計師、網頁設計師等相關人員都快樂。

有三個階段：

  1. Wireframe: Function & Layout（示意圖：功能及排版）
  2. Mockup: Form, Design, Visual（模型：表單、設計、視覺）
  3. Prototype（雛型；原型）

一般都是從第一至第三步驟，示意圖就像車子的框架，知道那些功能需要放到那些位置，或是像房子的鷹架，會預留部分空間當窗戶。可以用手稿或輔助軟體來製作。

模型，一般常用Photoshop美工軟體繒製，繒製設計花樣，可以包含大小、色彩。有軟體公司利用AIR開發一套Balsamiq Mockup工具，可以幫助你設計模型。最原始的方法，紙上徒手繒製，或是在HTML源碼上標明，有一工具polypage可以做到，但布丁不怎麼推薦，它會將所有標明都寫在同一個檔案。

這三個階段要如何使用呢？

在外國，Wireframe > Mockup > Prototype

在台灣，Mockup > Prototype，大都直接從 Mockup（模型）下手。

37signals著名軟體公司在部落格分享一篇文章：為什麼我們跳過Photoshop軟體？因為我們都是硬漢，直接寫程式源碼，再套用之前的版型再修改。

最後布丁大人說：觀迎大家到竹東玩小丁。

延伸閱讀

20190322更新：文末連結

留言

張貼留言

這個網誌中的熱門文章