চূড়ান্ত ইউআই নকশা গাইড

কন্টেন্ট

• 01. আপনার টাইপোগ্রাফি চয়ন করুন
• 02. ডান প্যালেট চয়ন করুন
• 03. স্টাইল লিঙ্ক এবং বোতাম
• 04. আপনার উপাদান তৈরি করুন
• 05. দলিল এবং সহযোগিতা

ইউজার ইন্টারফেস ডিজাইন কি? আরও ভাল প্রশ্ন হবে, আসলে কোন ইউজার ইন্টারফেসের ডিজাইনে যায়? নান্দনিকতা? ব্যবহারযোগ্যতা? অ্যাক্সেসযোগ্যতা? তাদের সবাই? এই সর্বোত্তম কারণগুলি কীভাবে সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা সক্ষম করতে একত্রিত হয় এবং কোনটি প্রথমে আসা উচিত?

অ্যাক্সেসযোগ্যতা সর্বদা প্রথম হওয়া উচিত, সর্বোত্তম ব্যবহারের জন্য ভিত্তি স্থাপন (শীর্ষ ওয়েবসাইট নির্মাতা ব্যবহার করে এখানে সহায়তা করবে)। এবং তারপরে, যখন কোনও ইউআই উভয়ই অ্যাক্সেসযোগ্য এবং ব্যবহারযোগ্য হয় তবে এটি ইতিমধ্যে নান্দনিকতার দিক থেকে বরং শালীন দেখানো উচিত (ইউআই ডিজাইনের সরঞ্জামগুলি এখানে সহায়তা করবে)। তারপরে, আপনার নকশাটি সমস্ত স্তরে কাজ করে তা নিশ্চিত করার জন্য, আপনাকে এটির পুরোপুরি পরীক্ষা করতে হবে যা আপনি আমাদের সেরা ব্যবহারকারীর পরীক্ষার সরঞ্জামগুলির নির্বাচনের সাথে করতে পারেন। আসুন বেশিরভাগ ডিজাইনের ভিত্তিগত উপাদানগুলি এবং ভিজ্যুয়াল ধারাবাহিকতা নিশ্চিত করার জন্য কী করা যেতে পারে তার এক ঘনিষ্ঠ নজর দেওয়া যাক।

01. আপনার টাইপোগ্রাফি চয়ন করুন

দুর্দান্ত টাইপোগ্রাফি (নকশার অনেক দিকের মতো) অ্যাক্সেসযোগ্যতার দিকে ফোটে। ভিজ্যুয়াল ডিজাইন অবশ্যই ব্যবহারকারীর সামগ্রিক অভিজ্ঞতাকে যুক্ত করে কিন্তু দিনের শেষে, ব্যবহারকারীরা ইউআইয়ের সাথে আলাপচারিতা করছেন, একে শিল্প হিসাবে দেখছেন না। সুস্পষ্ট বর্ণের ফলস্বরূপ স্পষ্ট বর্ণ এবং পাঠ্য শব্দগুলি হ'ল ব্যবহারকারীরা সামগ্রীকে দক্ষতার সাথে হজমে সহায়তা করে। উভয়ই কোনও ভিজ্যুয়াল নান্দনিকতার চেয়ে গুরুত্বপূর্ণ।

তবে, সুনির্দিষ্ট ডিজাইনের টাইপোগ্রাফিটি এখনও নান্দনিকভাবে সন্তুষ্টিজনক হতে পারে। কালো-অন-হোয়াইট হেলভেটিকা ​​(বা অনুরূপ ফন্ট) কেবল কয়েকটি সাধারণ টাইপোগ্রাফিক বর্ধনের পরে সৌন্দর্যের জিনিস হতে পারে। বর্ধিতকরণের দ্বারা, আমরা হ'ল ফন্টের আকার, লাইন উচ্চতা, বর্ণের ফাঁক এবং আরও - ফন্ট বা পাঠ্যের রঙ নয়।

‘সুন্দরী’ টাইপোগ্রাফিটি যখন অপঠনযোগ্য তখন প্রকৃতপক্ষে কুরুচিপূর্ণ কারণ হতাশা সর্বদা নন্দনতত্বকে হতাশ করে। দুর্দান্ত নকশা সুষম এবং সুরেলা।

ইউআই ডিজাইনের অনেক দিকের মতো, অ্যাক্সেসযোগ্যতা এবং নান্দনিকতার ভারসাম্য রক্ষার জন্য ভিজ্যুয়ালগুলি চ্যালেঞ্জ নয়। চ্যালেঞ্জটি পুরো নকশা জুড়ে ধারাবাহিকতা বজায় রাখা। ধারাবাহিকতা বিভিন্ন গুরুত্বের উপাদানগুলির মধ্যে সুস্পষ্ট শ্রেণিবিন্যাস প্রতিষ্ঠা করে, যার ফলে ব্যবহারকারীরা একটি ইউআই দ্রুত বুঝতে এবং এমনকি আরও কার্যকরভাবে সামগ্রী হজম করতে সহায়তা করে।

যখন এটি সুগঠনযোগ্যতা এবং পঠনযোগ্যতার কথা আসে, ডাব্লুসিএজি ২.০ ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনগুলি দ্বারা সংজ্ঞায়িত হিসাবে সর্বনিম্ন গ্রহণযোগ্য ফন্টের আকারটি 18pt (বা 14pt সাহসী) is ব্যবহারের জন্য সেরা ফন্টের আকারটি হ'ল ফন্টের উপর নির্ভর করে তবে ভিজ্যুয়াল শ্রেণিবিন্যাস সম্পর্কে সচেতন হওয়া এবং এই বেস আকারটি কীভাবে সংক্ষিপ্তসার এবং শিরোনাম থেকে আলাদা হয় (যেমন, h1>, h2>, h3>).

আপনার পছন্দসই ইউআই ডিজাইন সরঞ্জামের সাহায্যে (আমরা ইনভিশন স্টুডিওটি ব্যবহার করব), পাঠ্য স্তরগুলির একটি সিরিজ তৈরি করুন (টি) এবং তারপরে নিম্নলিখিত টেমপ্লেটের সাথে সম্পর্কিত করতে সমস্ত আকারকে সমন্বয় করুন:

• h1>: 44px
• এইচ 2>: 33px
• h3>: 22px
• p>: 18px

ইনভিশন স্টুডিও (এবং অন্যান্য সমস্ত ইউআই ডিজাইনের সরঞ্জাম) এর সাহায্যে ডানদিকে ইন্সপেক্টর প্যানেল ব্যবহার করে শৈলীগুলি সামঞ্জস্য করে এটি করা হয়।

এরপরে আপনার ফন্টটি চয়ন করুন, তবে সাবধান থাকুন কারণ কিছু ফন্টের সাথে আপনি যে বিষয়টি লক্ষ্য করতে পারেন তা হ'ল 18px p> এবং 22px h3> সব কিছু আলাদা দেখাচ্ছে না। আমাদের দুটি পছন্দ আছে: হরফের আকারগুলি টুইঙ্ক করুন বা শিরোনামগুলির জন্য আলাদা ফন্ট বিবেচনা করুন। আপনি যদি অনুমান করেন যে আপনার নকশাটি পাঠ্য-ভারী হবে the

মনে রেখ যে:

• ভিজ্যুয়াল ইউআই ডিজাইন প্রায়শই অন্ত্র-অনুভূতি পদ্ধতির হয়
• কিছুই সিদ্ধান্ত হয় না; সবকিছু পরিবর্তন সাপেক্ষে

লাইনের উচ্চতা

অনুকূল লাইনের উচ্চতা নিশ্চিত করে যে পাঠ্যযোগ্যতার শালীন স্তর অর্জনের জন্য পাঠ্যের রেখাগুলিতে তাদের মধ্যে পর্যাপ্ত ব্যবধান রয়েছে। এটি ‘স্ট্যান্ডার্ড’ হিসাবে স্বীকৃত হয়ে উঠছে; গুগলের লাইটহাউস অডিট সরঞ্জামটি এমনকি এটিকে ম্যানুয়াল চেক হিসাবেও প্রস্তাব দেয় (বা পাঠ্যে এমন লিঙ্কগুলি রয়েছে যা সাবঅপটিমাল লাইন উচ্চতার ফলে একসাথে খুব নিকটে থাকতে পারে)।

আবার, ডাব্লুসিএজি আমাদের সাথে এটির সাহায্য করে, ঘোষণা করে যে লাইন উচ্চতা হ'ল ফন্টের আকার 1.5x হওয়া উচিত। সুতরাং, আপনার ‘লাইন’ (বা অনুরূপ) এর অধীনে আপনার ইউআই ডিজাইনের সরঞ্জামটিতে, কমপক্ষে - 1.5 দ্বারা হরফের আকারটি গুণান। উদাহরণস্বরূপ, যদি বডি টেক্সটটি 18px হয়, তবে লাইনটির উচ্চতা 27px হবে (18 * 1.5 - আপনি সরাসরি পরিদর্শকের মধ্যেও গণিত ক্রিয়াকলাপ চালাতে পারেন)। আবার, যদিও মনোযোগ দিন - যদি 1.6x আরও ভাল ফিট মনে করে তবে 1.6x ব্যবহার করুন। মনে রাখবেন যে বিভিন্ন ফন্টগুলি বিভিন্ন ফলাফল আউটপুট দেয়।

আমাদের ডিজাইনে আসল ডেটা ব্যবহার করার কথা চিন্তা করা খুব তাড়াতাড়ি তবে খুব কমপক্ষে, আমাদের এখনও কিছুটা বাস্তববাদী ডেটা (এমনকি লোরেম আইপসাম) ব্যবহার করা উচিত। ইনভিশন স্টুডিওতে আমাদের টাইপোগ্রাফিটি আসলে কী দেখতে পারে তা দেখতে আমাদের সহায়তা করতে একটি নেটিভ রিয়েল ডেটা অ্যাপ্লিকেশন রয়েছে।

অনুচ্ছেদের ব্যবধান

অনুচ্ছেদের ব্যবধান কোনও স্টাইল নয় যা আমরা ইনভিশন স্টুডিওর পরিদর্শক ব্যবহার করে ঘোষণা করতে পারি। পরিবর্তে, আমাদের স্মার্ট গাইড (⌥) ব্যবহার করে ম্যানুয়ালি স্তরগুলি সারিবদ্ধ করতে হবে। লাইনের উচ্চতার অনুরূপ, ম্যাজিক গুণকটি 2x (ফন্টের আকারের দ্বিগুণ)। উদাহরণস্বরূপ, যদি ফন্টের আকার 18px হয়, তবে পরবর্তী পাঠ্য ব্লকে যাওয়ার আগে কমপক্ষে 36px স্থান থাকা উচিত। অক্ষরের ব্যবধান কমপক্ষে 0.12 হওয়া উচিত।

যাইহোক, আমরা উপাদান তৈরি শুরু না করা পর্যন্ত আমাদের এটি নিয়ে চিন্তা করার দরকার নেই।

ভাগ করা শৈলী

যদি আপনার ইউআই ডিজাইনের সরঞ্জাম এটি সমর্থন করে (ইনভিশন স্টুডিওটি এখনও তা করে না), ভিজ্যুয়াল ধারাবাহিকতা নিশ্চিত করার সময় এই টাইপোগ্রাফিক স্টাইলগুলিকে দ্রুত পুনরায় ব্যবহারযোগ্য করে তোলার জন্য এগুলি টাইপোগ্রাফিক স্টাইলগুলিকে পরিণত করার বিষয়টি বিবেচনা করুন। এটি সাধারণত পরিদর্শকের মাধ্যমে সম্পন্ন হয়।

02. ডান প্যালেট চয়ন করুন

আপনার ডিজাইনের জন্য নিখুঁত রঙগুলি নির্বাচন করা নান্দনিকতার বাইরে চলে যায়: এটি আপনার সাইটের পুরো শ্রেণিবিন্যাসকে অবহিত করতে পারে।

এটি যখন ইউআই ডিজাইনের কথা আসে তখন রঙটি প্রথমে হ'ল ডাবলিংয়ের প্রথম জিনিসগুলির মধ্যে একটি তবে আমরা শিখিয়েছি যে সরাসরি ভিজ্যুয়াল ডিজাইনে ডাইভিং করা একটি খারাপ জিনিস। এটি অবশ্যই সত্য, তবে এটি ভিজ্যুয়াল ধারাবাহিকতার ক্ষেত্রে, রঙটি শীর্ষস্থানীয় উদ্বেগ হওয়া উচিত কারণ এটি অন্যান্য ভূমিকা পালন করে।

ইউআই ডিজাইনের রঙটি কার্যকর কার্যকর হতে পারে তবে যেহেতু কিছু ব্যবহারকারী (অনেকগুলি প্রকৃতপক্ষে) বিভিন্ন ধরণের চাক্ষুষ অক্ষমতায় ভোগেন, তাই এটি সর্বদা নির্ভরযোগ্য নয়। বলা হচ্ছে, এটি নির্দিষ্ট রঙটি ব্যবহার করা হচ্ছে তা নয়, বরং রঙের ধরণ সম্পর্কে। ব্র্যান্ডিংয়ের ক্ষেত্রে এটি সত্য হতে পারে না যেহেতু রঙ এই ক্ষেত্রে মানসিক প্রভাবের জন্য ব্যবহৃত হয় তবে ইউআই ডিজাইনে রঙটি অভিপ্রায়, অর্থ এবং অবশ্যই, ভিজ্যুয়াল শ্রেণিবিন্যাসের যোগাযোগের জন্য ব্যবহৃত হয়।

01. ডাহা
স্টার্ক প্লাগইন স্কেচ এবং অ্যাডোব এক্সডি এর সাথে সামঞ্জস্যপূর্ণ এবং আপনাকে রঙের বিপরীতে পরীক্ষা করতে এবং সরাসরি ক্যানভাস থেকে বর্ণ অন্ধত্ব অনুকরণ করতে সহায়তা করে। ফিগমা এবং ইনভিশন স্টুডিওর জন্য খুব শীঘ্রই সমর্থন।
02.রঙ
রঙগুলি হ'ল 90 টি রঙের সংমিশ্রণের একটি সেট যা ডাব্লুসিএজি ২.০ গাইডলাইনগুলি সন্তুষ্ট করতে উপযুক্ত পরিমাণে রঙের বৈপরীত্য রয়েছে - তাদের মধ্যে কিছু এএএ স্ট্যান্ডার্ডটি মেটানোর জন্য পরিচালনা করে।
03. A11y প্রকল্প
A11y প্রজেক্টটি অ্যাক্সেসযোগ্যতার সাথে সম্পর্কিত সমস্ত জিনিসের একটি বিশাল কেন্দ্র। এটিতে সংস্থানসমূহ, সরঞ্জামগুলি, টিপস, টিউটোরিয়ালগুলি অন্তর্ভুক্ত রয়েছে এবং এটি স্টার্ক প্লাগইনটির নির্মাতা দ্বারা তৈরি করা হয়েছে এবং ইনভিশন থেকে তহবিল গ্রহণ করে।

তিন ধরণের রঙ

রঙগুলি অর্থ ধারণ করে, সুতরাং এর বেশি পরিমাণে না রাখা গুরুত্বপূর্ণ। অনেকগুলি অর্থের ফলে ফলাফলটি ব্যবহারকারীকে বুঝতে এবং মনে রাখতে হয় - আমাদের উদ্বেগের জন্য আরও রঙের সংমিশ্রণের উল্লেখ না করা। সাধারণভাবে বলতে গেলে, এটি প্রস্তাবিত বিন্যাস হবে:

• কল-টু-অ্যাকশন রঙ (মূল ব্র্যান্ডের রঙ)
• একটি নিরপেক্ষ গা dark় রঙ (ইউআই উপাদান বা অন্ধকার মোডের জন্য ভাল)
• উপরের সমস্তটির জন্য, কিছুটা হালকা এবং গাer় প্রকরণ

এটি নিম্নলিখিতগুলিকে সক্ষম করে:

• অন্ধকার মোড সহজেই অর্জনযোগ্য হবে
• আমাদের সিটিএ রঙ অন্য রঙের সাথে কখনই বিরোধ করবে না
• যে কোনও পরিস্থিতিতে আমরা জোর দিতে এবং ডি-জোর দিতে সক্ষম হব

আপনার প্যালেট সেট আপ করুন

আপনার পছন্দসই ইউআই ডিজাইন সরঞ্জামের সাহায্যে প্রতিটি রঙের জন্য একটি রঙের জন্য মোটামুটি বড় আর্টবোর্ড তৈরি করুন (যার নাম 'ব্র্যান্ড', 'নিরপেক্ষ / হালকা' এবং 'নিরপেক্ষ / গা D়')। তারপরে, প্রতিটি আর্টবোর্ডে, বর্ণের গা and় এবং হালকা প্রকরণ এবং অন্যান্য রঙগুলি নিজেই দেখায় এমন অতিরিক্ত ছোট আয়তক্ষেত্র তৈরি করুন।

আমরা যথাক্রমে 10 শতাংশ অতিরিক্ত সাদা এবং 10 শতাংশ অতিরিক্ত কালো হিসাবে কিছুটা হালকা এবং গাer় বিবেচনা করব। আপনার হয়ে গেলে, প্রতিটি আর্টবোর্ডে টাইপোগ্রাফিক শৈলীর অনুলিপি প্রদর্শন করুন। এই পাঠ্য স্তরগুলির রঙ নিরপেক্ষ আলো হওয়া উচিত, নিরপেক্ষ আলো আর্টবোর্ড বাদে যেখানে সেগুলি নিরপেক্ষ অন্ধকার হওয়া উচিত।

বৈপরীত্য

এর পরে অনুকূল রঙের বিপরীতে আমাদের রঙগুলি পরীক্ষা করতে হবে। বিভিন্ন ধরণের সরঞ্জাম এটি করতে পারে, উদাহরণস্বরূপ স্কেচের জন্য স্টার্ক প্লাগইন এবং ম্যাকোসের জন্য অ্যাডোব এক্সডি বা কনট্রাস্ট - তবে কনট্রাস্ট চেকার বা রঙ বৈপরীত্য পরীক্ষক হিসাবে একটি অনলাইন সমাধান ঠিক ঠিক করবে।

প্রতিটি সংমিশ্রনের জন্য রঙের বৈপরীত্য পরীক্ষা করুন এবং সেই অনুযায়ী রঙগুলিকে সামঞ্জস্য করুন। কোন রঙগুলি ব্যবহার করবেন তা আপনি যদি নিশ্চিত না হন তবে কালার সেফের সুপারিশগুলি ব্যবহার করে দেখুন।

03. স্টাইল লিঙ্ক এবং বোতাম

আকার

বোতাম এবং লিঙ্কগুলি, অনেকটা টাইপোগ্রাফির মতো, কয়েকটি ভিন্নতা থাকা উচিত। সর্বোপরি, সমস্ত ক্রিয়া সমান স্তরের নয় এবং যেমনটি আমরা আগে আলোচনা করেছি, রঙ যোগাযোগের একটি অবিশ্বাস্য পদ্ধতি, সুতরাং এটি চাক্ষুষ শ্রেণিবিন্যাসকে প্রভাবিত করার মূল পদ্ধতি হতে পারে না। আমাদের আকারের সাথে খেলনাও দরকার।

একটি ভিজ্যুয়াল অ্যাভয়েেন্স পরীক্ষা হ'ল ট্যাপ লক্ষ্যগুলি ক্লিকযোগ্য বলে মনে হচ্ছে কিনা তা নির্ধারণের জন্য ব্যবহারযোগ্যতা পরীক্ষা। স্টুডিও থেকে ফ্রিহ্যান্ডে নকশা সিঙ্ক করুন (.F), ফলাফলকারী URL টি পরীক্ষার্থীদের কাছে প্রেরণ করুন এবং তারা যে উপাদানগুলিকে ক্লিকযোগ্যযোগ্য বলে মনে করেন তাদেরকে বৃত্তাকারে পাঠান।

নন-ইনভিশন স্টুডিও ব্যবহারকারীরাও ফ্রিহ্যান্ড ব্যবহার করতে পারেন তবে ইনভিশন স্টুডিওর ব্যবহারকারীরা ইনভিশন স্টুডিও থেকে নির্বিঘ্নে তাদের নকশাগুলি ফ্রিহ্যান্ডে চালু করতে পারেন যা ব্যবহারকারীদের কাছ থেকে ভিজ্যুয়াল প্রতিক্রিয়া অর্জনের দ্রুত এবং সবচেয়ে কার্যকর উপায়।

সাধারণত, আমরা সুপারিশ করব যে বোতামের পাঠ্যটিকে 18px হিসাবে ঘোষণা করা হবে (দেহের পাঠ্যের মতো) তবে বোতামগুলির নিজের আকারে তিনটি ভিন্নতা রয়েছে:

• সাধারণ: উচ্চতায় 44px (বৃত্তাকার কোণ: 5px)
• বৃহত্তর: উচ্চতা 54px (বৃত্তাকার কোণ: 10px)
• অতিরিক্ত বড়: উচ্চতা 64px (বৃত্তাকার কোণ: 15px)

এটি আমাদের নির্দিষ্ট বাটনগুলিকে রঙের উপর নির্ভর না করে এবং বাসা বোতামগুলিতে আরও গুরুত্বপূর্ণ হিসাবে দেখাতে সক্ষম করে তোলে (উদাহরণস্বরূপ, একটি স্বল্প-সন্ধানী ফর্ম ক্ষেত্রের ভিতরে একটি বোতাম ব্যবহার করুন)।

গভীরতা

ট্যাপ টার্গেটটি বোতাম বা কোনও ফর্ম ক্ষেত্র কিনা তা বিবেচনা না করেই, ছায়াগুলি গভীরতা বাড়াতে ব্যবহার করা উচিত এবং তাই ইন্টারঅ্যাক্টিভিটির পরামর্শ দেয়। বোতামের সমস্ত রূপ এবং ফর্ম ক্ষেত্রগুলির জন্য একটি একক ছায়ার স্টাইল ভাল।

ইন্টারেক্টিভিটি

প্রতিটি বোতামের প্রকারের তার হওর অবস্থা নির্দেশ করার জন্য একটি প্রকরণ প্রয়োজন। এটি ব্যবহারকারীর কাছে স্পষ্ট করে দেয় যে তারা যা করার চেষ্টা করেছে তা সম্পূর্ণরূপে ঠিক এবং এটি নিশ্চিত করে যে তারা দেরি না করেই চালিয়ে গেছে।

এটি প্রকৃতপক্ষে ভিজ্যুয়াল ধারাবাহিকতা বজায় রাখার আরও জটিল বিষয়গুলির মধ্যে একটি কারণ যখন একটি রাজ্য তৈরির বিষয়টি আসে তখন রঙটি প্রায়শই পরিবর্তন করা পছন্দসই শৈলী হয়। ধন্যবাদ, এই রাষ্ট্রীয় পরিবর্তনগুলি তুলনামূলকভাবে সূক্ষ্ম হতে পারে, তাই রঙটিকে কিছুটা হালকা বা গাer় প্রকরণে পরিবর্তন করা ভাল - তারা তাদের জন্য। এটি লিঙ্কগুলিতেও প্রযোজ্য।

এর বিরুদ্ধে সিদ্ধান্ত নেওয়ার ফলে আমরা এমন একটি রঙ ব্যবহার করব যা ইতিমধ্যে তাত্পর্যপূর্ণ অর্থ রয়েছে, যার ফলে ব্যবহারকারীরা বিভ্রান্ত হয়ে পড়বে, অথবা অন্য কোনও রঙ নিয়ে আসে with কোনও গৌণ রঙ ব্যবহার করার সিদ্ধান্ত নেওয়া পুরোপুরি ঠিক আছে তবে এটি ইউআই উপাদানগুলির পরিবর্তে বিপণনের জন্য সংরক্ষণ করা উচিত। কম বেশি (এবং সহজ)।

প্রতিটি আর্টবোর্ডের জন্য এই পদক্ষেপটি পুনরাবৃত্তি করতে ভুলবেন না। ব্র্যান্ডের আর্টবোর্ডে ব্র্যান্ডযুক্ত সিটিএ বোতামগুলি অন্তর্ভুক্ত করবেন না - পরবর্তীতে আমরা নির্দিষ্ট সংমিশ্রণগুলি কাজ না করে তখন কী হয় তা আমরা আবরণ করব।

04. আপনার উপাদান তৈরি করুন

উপাদানগুলি একটি বিশাল সময় সাশ্রয়কারী এবং সমস্ত ইউআই ডিজাইনের সরঞ্জামগুলি এই বৈশিষ্ট্যটি সরবরাহ করে (উদাহরণস্বরূপ স্কেচ এগুলিকে প্রতীক বলা হয়)। স্টুডিওতে আমরা উপাদানগুলি তৈরি করতে হবে এমন সমস্ত স্তর নির্বাচন করে এবং using ব্যবহার করে উপাদান তৈরি করতে পারি ⌘কে শর্টকাট

উপাদান ব্যবহার

ওয়্যারফ্রেমগুলি কেবলমাত্র উচ্চ-ব্যবহারযোগ্যতা ইউআই ডিজাইনের জন্য নয়, দীর্ঘ সময়ের জন্য আমাদের ইউআই কী প্রয়োজন তা সন্ধানের জন্যও খুব দরকারী। এটি ভবিষ্যতের প্রুফিংয়ের মতো।

এর অর্থ এই নয় যে আমাদের লোডগুলির অনেকগুলি উপাদান ডিজাইন করা বা যে কোনও সম্ভাব্য দৃশ্যের জন্য প্রস্তুত হওয়া প্রয়োজন তবে এর অর্থ এই নয় যে আমাদের একটি ‘যদি তবে?’ মনোভাব নিয়োগ করা দরকার।

উদাহরণস্বরূপ, যদি আমাদের ওয়্যারফ্রেম একটি 3x1 উপাদানটির জন্য কল করে তবে আমরা জানি যে বিষয়বস্তুটি পাথরে সেট করা নেই, তবে একটু চিন্তাভাবনা আমাদের অবাক করে দিতে পারে: ’যদি এই উপাদানগুলি 4x1 হয়ে যায় তবে কী হবে?’। থাম্বের নিয়মটি হ'ল: কেবলমাত্র ব্যবহারকারীর প্রয়োজনের জন্য ডিজাইনটি ইতিমধ্যে বিদ্যমান রয়েছে তবে সমাধানগুলি তুলনামূলকভাবে নমনীয় করার চেষ্টা করুন। অন্যথায়, আমরা পরে কিছুটা নিচে নেমে কিছু অতি অগোছালো ‘ডিজাইন debtণ’ নিয়ে শেষ করব।

এখন আমরা এই উপাদানটি বাম-হাতের লাইব্রেরি> ডকুমেন্ট থেকে ক্যানভাসে টেনে এটিকে পুনরায় ব্যবহার করতে পারি, যদিও মনে রাখবেন যে এই ওয়ার্কফ্লো আপনার ইউআই সরঞ্জামের উপর নির্ভর করে পৃথক হতে পারে।

স্টাইল গাইড তৈরি করার এই পদ্ধতিটি (এবং শেষ পর্যন্ত নিজেই নকশা তৈরি করা) মডুলার / কার্ড-ভিত্তিক লেআউটগুলির সাথে বিশেষত ভাল কাজ করে, যদিও ‘সাধারণ অঞ্চল’ যেমন শিরোনাম, পাদচরণ এবং নেভিগেশনগুলিও কোনও উপাদানটির জন্য দুর্দান্ত প্রার্থী।

আমরা যেমন আমাদের টাইপোগ্রাফিক শৈলী, রঙ এবং বোতামগুলি দিয়ে কাজ করেছি, আমাদের অবশ্যই আমাদের উপাদানগুলি সাবধানে সংগঠিত করতে হবে।

আমাদের নিয়ম ব্যবহার

এর আগে আমরা ব্র্যান্ড রঙের শীর্ষে ব্র্যান্ডযুক্ত সিটিএ বোতামগুলি ব্যবহার না করার বিষয়ে একটি মন্তব্য করেছি, যেহেতু ব্র্যান্ডযুক্ত সিটিএ বোতামগুলির অবশ্যই স্পষ্টতই অন্য সব কিছুর মধ্যে দাঁড়ানো দরকার। সুতরাং আমরা কীভাবে ব্র্যান্ডযুক্ত সিটিএ বোতামটি ব্যবহার করতে সক্ষম হয়ে একটি ব্র্যান্ডযুক্ত উপাদান তৈরি করতে যাব? সর্বোপরি, আমরা যদি নিরপেক্ষ অন্ধকার বোতামগুলির জন্য ব্যবহার করি, তবে যাক, নেভিগেশনাল বোতাম বা কেবলমাত্র কম-গুরুত্বপূর্ণ বোতামগুলি ব্যবহার করা যাক, এটি কেবল একটি বিকল্প হবে না, তাই না?

ঠিক। সুতরাং এটি একটি উপাদান তৈরি করার একটি আদর্শ সুযোগ হবে - বিশেষত, একটি শিরোনাম + পাঠ্য + বোতামের সংমিশ্রণ। ব্র্যান্ডেড বোতামটির ব্যবহার সক্ষম করতে আমি কীভাবে একটি নিরপেক্ষ আলো ‘কার্ড’ ব্যাকড্রপ তৈরি করেছি তা লক্ষ্য করুন। একইভাবে, নিরপেক্ষ আলো ফর্ম ফিল্ড (সাধারণত ফর্ম ক্ষেত্রগুলি সাধারণত মানসিক মডেলের কারণে সাদা হয়ে থাকে কারণ paperতিহাসিকভাবে কাগজের ফর্মগুলির সমার্থক) নিরপেক্ষ আলো পটভূমিতে আশ্চর্যজনক লাগে না তাই এগুলি কেবল নিরপেক্ষ অন্ধকার পটভূমিতে ব্যবহার করা যেতে পারে - হয় প্রত্যক্ষভাবে বা এর মধ্যে একটি নিরপেক্ষ অন্ধকার উপাদান। আমাদের নিয়ম মেনে চলতে এবং ধারাবাহিকতা বজায় রেখে আমরা এভাবেই আমাদের নকশাটিকে নমনীয় করে তুলি।

চাপ পরীক্ষা

আদর্শভাবে, আমাদের ডিজাইনে দৃust়তা নিশ্চিত করার দ্রুত এবং কার্যকর উপায় হ'ল এটির উপর চাপ দেওয়া। পরীক্ষায় একটি নকশা করা মানে নিষ্ঠুর হওয়া। ধরা যাক যে আমাদের এক্স পরিমাণ পরিমাণ ন্যাভ আইটেমের সাথে নেভিগেশন রয়েছে কারণ এটি ছিল প্রয়োজনীয়তা; প্রকৃতপক্ষে নমনীয়তা নিশ্চিত করতে, আরও ন্যাভ আইটেম যুক্ত করে এই প্রয়োজনীয়তাগুলি পরিবর্তন করার চেষ্টা করুন বা কার্যত একটি স্প্যানার ছুঁড়ে ফেলার জন্য, অন্যদের চেয়ে উচ্চতর চাক্ষুষ শ্রেণিবিন্যাসের সাথে একটি ন্যাভ আইটেম যুক্ত করার চেষ্টা করুন। আমাদের আকার, টাইপোগ্রাফি এবং রঙের নিয়মগুলি কি এরকম কিছু করার অনুমতি দেয়? বা সর্বোত্তম ব্যবহারযোগ্যতার প্রস্তাব দেওয়ার জন্য আমাদের আরও একটি নিয়ম প্রয়োজন?

মনে রাখবেন যে বিধিগুলি যুক্ত করার এবং বিধি মোড়ানোর মধ্যে পার্থক্য রয়েছে। বেশিরভাগ প্রান্তের ক্ষেত্রে অর্থ কম ধারাবাহিকতা থাকে, তাই বেশিরভাগ সময় কেবল ব্যবহারকারীর খাতিরে উপাদানটির পুনর্বিবেচনা করা ভাল।

05. দলিল এবং সহযোগিতা

আমরা কীভাবে আমাদের ডিজাইন ফাইলগুলিকে নিজের এবং অন্য কোনও ডিজাইনার উভয়ের জন্য ব্যবহার করতে সহজ করব যা আমাদের ডিজাইন ফাইলটি ব্যবহার করতে পারে? ঠিক আছে, এগুলি নিরাপদে নির্ভরযোগ্য, ভাগ করা মেঘ স্টোরেজে সংরক্ষণ করা গুরুত্বপূর্ণ, যেমন আপনি খুঁজে পাবেন।

রঙ

প্রথম পদক্ষেপটি হ'ল আমরা যদি ইতিমধ্যে এটি না করে থাকি তবে 'ডকুমেন্ট কালারস' স্য্যাচে সমস্ত রঙগুলি সংরক্ষণ করা - এটি আমাদের ডিজাইনে প্রয়োগ করার প্রয়োজন হলে তাদের অ্যাক্সেস করা আরও সহজ করে দেবে।এটি করার জন্য, পরিদর্শকের কাছ থেকে রঙ চয়নকারী উইজেটটি খুলুন, ড্রপডাউন থেকে 'ডকুমেন্ট কালার' চয়ন করুন এবং তারপরে সোয়েচে রঙ যুক্ত করতে + আইকনটি ক্লিক করুন। বেশিরভাগ ইউআই সরঞ্জামগুলিতে এটি একইভাবে কাজ করে।

ভাগ করা লাইব্রেরি

এরপরে, আমাদের ডকুমেন্টটি - টাইপোগ্রাফিক শৈলী, রঙ, বোতাম, সাধারণ অঞ্চল এবং মৌলিক উপাদানগুলি - একটি ভাগ করে নেওয়া লাইব্রেরিতে রূপান্তর করতে হবে।

মূলত এর অর্থ হ'ল প্রতিটি উপাদানটির একটি উপাদান হওয়া দরকার, এমনকি যদি এটিতে কেবল একটি স্তর থাকে। বাম-পাশের লাইব্রেরিগুলির সাইডবারের + + বোতামটি ক্লিক করুন এবং তারপরে এই খুব দস্তাবেজটিকে একটি নতুন নথিতে আমদানি করুন। এটি ঠিক: আমাদের দস্তাবেজটি এখন একটি গ্রন্থাগার এবং গ্যারান্টিযুক্ত ধারাবাহিকতা সহ ইউআই ডিজাইন করার জন্য প্রস্তুত।

ইনভিশন স্টুডিওটি কিছুটা অর্থেই সীমিত যা এটি এখনও ইনভিশনের অফিসিয়াল ডিজাইন সিস্টেম ম্যানেজার সরঞ্জামের সাথে সিঙ্ক করে না তবে ড্রপবক্সে লাইব্রেরিটি অন্য ডিজাইনারদের জন্য এবং সময়ের সাথে সাথে আপডেট করার পক্ষে এটি যথেষ্ট সহজ। যখন কোনও পরিবর্তন করা হয় (স্থানীয়ভাবে বা দূরবর্তীভাবে), লাইব্রেরি ব্যবহার করে এমন প্রতিটি স্টুডিও ফাইল (আবার স্থানীয়ভাবে বা দূরবর্তীভাবে) জিজ্ঞাসা করবে আপনি রঙ এবং উপাদানগুলি আপডেট করতে চান কিনা। এইভাবে দল জুড়ে ডিজাইনের গ্রন্থাগারগুলি রক্ষণাবেক্ষণ করা হয়।

যখন দৃষ্টিভঙ্গিতে সামঞ্জস্যপূর্ণ ব্যবহারকারী ইন্টারফেসগুলি ডিজাইনের ক্ষেত্রে আসে তখন সমস্ত কিছু পুনরায় ব্যবহার করুন। বোতামগুলি ডিজাইন করুন, তারপরে বোতামের উপাদানগুলি তৈরি করতে বোতামগুলি ব্যবহার করুন, তারপরে ব্যবহার করুন
অন্যান্য উপাদান যেমন সতর্কতা এবং ডায়ালগ তৈরি করতে বোতামের উপাদানগুলি।

কেবল প্রয়োজনীয় উপাদানগুলি তৈরি করবেন না। মনে রাখবেন, একটি গ্রন্থাগার নির্মাণ একটি চলমান, সহযোগী প্রচেষ্টা effort এটি একসাথে সম্পূর্ণ করতে হবে না, একা আপনার দ্বারা সম্পূর্ণ বা কখনও শেষ করা সম্ভব নয়। এটি কেবল একটি ভাষা জানাতে হবে।

স্কেল ডিজাইন

একটি নকশা প্রসারিত হওয়ার সাথে সাথে এটি পরিচালনা করা আরও শক্ত হয়ে যায়। এটিকে দক্ষ ও রক্ষণাবেক্ষণের জন্য রাখতে আমরা বিভিন্ন সমন্বয় করতে পারি, বিশেষত ইনভিশনের ডিএসএম স্টুডিওতে এখনও কাজ করে না বলে।

উদাহরণস্বরূপ, আমরা বিভিন্ন লাইব্রেরির ব্যবহারের কেস ব্যাখ্যা করার মাধ্যম হিসাবে আমাদের লাইব্রেরিটি টীকাতে পাঠ্য স্তরগুলি ব্যবহার করতে চাই। টাইপোগ্রাফিক শৈলীর জন্য, আমরা এমনকি পাঠ্যটিকে আরও বর্ণনামূলক হিসাবে সম্পাদনা করতে পারি (যেমন "এইচ 1> / 1.3 / 44px")। এই যে বলে h1>s 44px হওয়া উচিত এবং এর লাইনের উচ্চতা 1.3 হওয়া উচিত।

ডিজাইন হ্যান্ডঅফ

ডিজাইন হ্যান্ডঅফ সরঞ্জামগুলি ডিজাইনের প্রতিটি উপাদান দ্বারা ব্যবহৃত বিভিন্ন স্টাইল প্রদর্শন করে যাতে বিকাশকারীরা অ্যাপ বা ওয়েবসাইট তৈরি করতে পারে। এই সরঞ্জামগুলির মধ্যে শৈলীর একটি ওভারভিউ এবং ‘ডকুমেন্ট রঙের’ স্য্যাচের একটি অনুলিপি অন্তর্ভুক্ত রয়েছে। বিকাশকারীরা এমনকি এই স্টাইলগুলি কোড হিসাবে অনুলিপি করতে পারেন, আপনি যদি কোনও লিখিত নকশার ডকুমেন্টেশন তৈরির সিদ্ধান্ত নিয়ে থাকেন এবং আপনি উপাদানগুলির কোড স্নিপেট উপস্থাপনা অন্তর্ভুক্ত করতে চান তবে তা দুর্দান্ত।

আপনি যদি কোনও সমস্যা সমাধান এবং কোনও ওয়েবসাইট পরিচালনার বিষয়ে উদ্বিগ্ন হন তবে নিশ্চিত হয়ে নিন যে আপনি সঠিক ওয়েব হোস্টিং পরিষেবা পেয়েছেন সহায়তা করবে তবে আপনার ডিজাইন সিস্টেমের জন্য ইনভিশনের নকশার হ্যান্ডঅফ সরঞ্জাম, পরিদর্শন, এটি ব্যবহার করার জিনিস thing এটি ব্যবহার করতে, আমরা ইনভিশন স্টুডিওতে ‘ইনভিশন থেকে প্রকাশ করুন’ বোতাম / আইকনটি ক্লিক করি, ফলাফল URL টি খুলি এবং তারপরে পরিদর্শন মোডে স্যুইচ করতে আলতো চাপুন। এটি সত্যিই সুবিধাজনক।

এই বিষয়বস্তুটি মূলত নেট ম্যাগাজিনে প্রকাশিত হয়েছিল।