تاریخ طراحی user interface را میتوان بیشتر به عنوان یک تغییر تدریجی به سمت واقع گرایی توصیف کرد. همزمان با سریعتر شدن کامپیوترها ، طراحان افکتها و جزییات واقعی بیشتری مثل رنگ ، افکتهای سه بعدی ، سایه ، شفافیت و حتی قوانین فیزیک را درکارهای خود وارد کردند. بعضی از این تغییرات به کاربردپذیری (usability) کمک کرد. سایه ها در پشت پنجره ها به ما کمک می کند که بفهمیم کدام یک در حال حاضر فعال هستند.
رابط کاربری گرافیکی معمولا پر از سیمبلها و علائم هستند. بیشتر اجرا گرافیکی که بر روی صفحه می بینید دلیلی برای بودنشان هست. خانه کوچکی رو صفحه به معنی وجود خانه نیست بلکه لینکی به صغحه اول یا همان Home هست. عکس چرخ دنده به معنی چرخ دنده نیست بلکه به این معنی است که روی من کلیک کن تا سایر گزینه ها را ببینی ! شما معمولا سعی نمی کنید که از اجزای فیزیکی بی دلیل استفاده کنید، بلکه سعی دارید توسط آنها ارتباط برقرار کنید.
جزییات و واقع گرایی می توانند از این مفهوم ها دور شوند. برای توضیح بیشتر، یک صفحه از Scott McCloud’s Understanding Comics را در نظر می گیرم. کتابی که خواندن آن برای همه طراحان لازم است.

تصویر سمت چپی صورت یک شخص خاص است. تصویر سمت راست تصویر مفهومی صورت است، میتواند هر شخصی باشد. وقتی رابط کاربری طراحی می کنید، کمتر پیش می آید که بخواهیم یک شی یا شخص یا وجود خاصی را نشان بدهیم، بیشتر می خواهیم که یک مفهوم را نمایش بدهیم. جزییات خیلی راحت میتوانند ما را از این مفهوم دور کنند.

با این حال آشکار است که بعضی جزییات هم لازم است. اگر جزییات خیلی کم باشد کاربر به راحتی نمی تواند ایده و مفهوم آنرا تشخیص بدهد.

دایره سمت چپی یک صورت را نشان می دهد. دایره سمت راستی به عنوان یک صورت نمی تواند در نظر گرفته شود.
حال نگاهی به علائمی که معمولا در رابط کاربری استفاده می شود بیاندازیم، دکمه خانه. معمولا برای این دکمه از تصویر کوچک یک خانه استفاده می شود.

عکس سمت چپی یک خانه است. عکس سمت راست معنای خانه را می دهد. تصویری بین این دو می تواند از تصویر یک خانه خاص به تصویر مفهومی خانه تغییر کند. هر چقدر بیشتر یک تصویر واقعی باشد درک کردن ایده استفاده از آن سخت تر است و اگر بیشتر از اندازه ساده شده باشد خیلی سریع و ساده نمی توان معنی و مفهوم آنرا درک کرد.

تصویر سمت چپ یک دکمه خانه است. تصویر سمت راست ممکن است با تصویر یک فلش به سمت بالا اشتباه گرفته شود.
حال این ایده را توسط نمودار زیر توضیح می دهم :

کاربران معمولا توسط علائمی که خیلی زیاد یا خیلی کم جزییات داشته باشند گمراه می شوند. علائمی را شناسایی می کنند که در این میان باشند.
رمز کار در این است که بفهمیم چه جزییاتی می تواند به کاربر کمک کند که علائم رابط کاربری را شناسایی کند، و چه جزییاتی می تواند آنها را از این مفهوم دور کند. بعضی از جزییات به کاربر کمک می کند که بفهمند به چه چیزی نگاه می کنند و چگونه می توانند با آن ارتباط برقرار کنند و بعضی بالعکس . آنها رابط کاربری شما را از یک ایده به صورت یک چیز خاص در می آورند. با این حال اگر این جزییات کم شوند ممکن است موجب شود تا کاربر مفهوم و منظور آنرا درک نکند.

دکمه سمت چپی خیلی واقعی است. دکمه سمت راست جزییات کافی برای اینکه خود را به عنوان یک دکمه نشان دهد ندارد.

همین موضوع در مورد تصویر بالا هم صدق می کند. سایه ها و گرادیانت به کاربر کمک می کند که بفهمد به چه چیزی نگاه می کند و چگونه با آن ارتباط برقرار کند. اضافه کردن مقدار زیادی جزییات ممکن است به گیج کردن کاربر منجر شود. این دکمه ممکن است به عنوان تصویر یک دکمه شناخته شود نه به عنوان یک قسمت از رابط کاربری. به عنوان یک سیمبل شناخته نمی شود بلکه به عنوان یک شی خاص کاربر آنرا می شناسد.

یک استثنا
حداقل در یک زمینه ممکن است اضافه کردن جزییات بیشتر مفید باشد: آیکانهای برنامه ها. شما میخواهید که آیکان شما یک ایده خاص را نمایش بدهد: برنامه شما
![]()
آیکان برگ coda نمی خواهد که ایده یک برگ را نمایش بدهد، این تصویر یک برگ خاص است، برگ coda. میوه درخت بلوط Acorn ، میوه بلوط را نمایش نمی دهد ، این آیکان برنامه Acorn هست. اضافه کردن جزییات به این آیکانها آنها را از حالت عمومی به حالت خاصی می رساند که در این مورد آیکان یک برنامه هست.
نتیجه گیری
رابط کاربری گرافیکی مملو از سیمبلها و علائم هست. سیمبلها باید به اندازه مورد نیاز کاهش پیدا کنند. این کار کمک می کند که رابط کاربری پر از علائم نامفهوم نشود و به کاربران اجازه می دهد که به راحتی آنها را بخوانند و معنی آنها را درک کنند. نشانه های واقعی ممکن است به شما اجازه ندهد تا معنی و مفهوم مورد نیاز خود را به کاربر برسانید.
مگر اینکه که شما در حال ساختن نسخه مجازی از یک شی فیزیکی هستید، هدف این است که رابط کاربری خود را تا حد ممکن به واقعیت نزدیک نکنید. هدف این است که شما این جزییات را در صورتی اضافه کنید که به کاربر در درک کردن مفهوم آن کمک کند و به او کمک کند که با آن ارتباط برقرار کند. اجزا رابط کاربری طرحهای انتزاعی هستند که هدف آنها رساندن مفهوم و ایده است، آنها باید شامل جزییاتی باشند که به هدف آنها مربوط است. آنها نشان دهنده چیزهای واقعی نیستند. اضافه کردن زیاد جزییات باعث سردرگمی می شود.





قوانین ساخت interface همه ساده و منطقی هستند ولی فقط با دقت زیاد میشه به موقع یادشون آورد و بکار گرفت.
خود من همچین مشکلی دارم.
این قبیل مقالات در فارسی نایاب هستند، لطفا بیشتر تولید بفرمایید
سلام/ پست خوبی بود من هم استفاده کردم/.
درود/.
سلام
من در این پست ها یه سری اطلاعات اولیه رو قرار دادم :
http://blog.datisdesign.com/persian/?p=265 و http://blog.datisdesign.com/persian/?p=45
همچنین میتونید از این سایت هم استفاده کنید :
http://www.colorsontheweb.com/
سلام و خسته نباشید خدمت شما،اولا باید بگم که سایت و وبلاگ واقعا عالی و زیبایی دارین،دوما،راستش یه سوال داشتم که نمیدونستم کجا باید بپرسم و واسم مهم بود که جوابش رو دریافت کنم،این بود که به آخرین پستتون نظر دادم،ببخشید دیگه…
سوال:من تو کار طراحی هستم البته به صورت خودآموز و با استفاده از کتاب و اینترنت طراحی رو یاد گرفتم،سوالم اینه که : من خیلی از ترکیب زنگها و هم خونیه رنگها سر در نمیارم،(میدونم خیلی زشته)
میخواستم اگه امکان داره یه منبع واسه آموزش ترکیب رنگها در طراحی وب بهم معرفی کنید،زیونشم فارسی یا انگلیسی تفاوتی نداره،ممنون میشم اگه این لطف رو به من بکنید…
واقعا خوب بود ممنون
ممنون از شما ، واقعا خوب بود